HTML Styles - CSS

HTML Styles - CSS

1. CSS ကို Cascading Style Sheets လို့ အရှည် ခေါ် ပါတယ်။
2. CSSက multiple web pages တွေရဲ့ layoutတွေကို တစ်ကြိမ်တည်းနဲ့ ထိန်းချုပ်နိုင်ပါတယ်။

---

CSSဆိုတာ ဘာလဲ?

CSSက web pageတစ်ခုရဲ့ layout တွေ ပုံစံချတဲ့အခါ အသုံးဝင်ပါတယ်။သင်တို့က အရောင်တွေ ၊ စာလုံးတွေ ၊ စာလုံးတွေရဲ့ အရွယ်အစား ၊ element တစ်ခုနဲ့တစ်ခုကြား အကွာအဝေး ၊ element တွေကို ဘယ်လိုပုံစံ ထားမလဲ ၊ ဘယ်background image (သို့မဟုတ် background colorကို သုံးမယ်၊ မတူညီတဲ့ device တွေအတွက် ပုံစံအမျိုးမျိုး ချတာတွေ ၊ အတွက်ဆို CSSကို သုံးပြီး ထိန်းချုပ်နိုင်ပါတယ်။

Cascading ဆိုတဲ့အဓိပ္ပါယ် ဆိုတာက parent element ကိုသက်ရောက်တဲ့ styleတစ်ခုက အဲ့ဒီ parentအတွင်းမှာ ရှိတဲ့ children elementတွေကို အကျိုးသက်ရောက်စေပါတယ်။ ဆိုလိုရင်းကတော့ သင်ဟာ bodyရဲ့ text ကို အပြာရောင် သတ်မှတ်လိုက်ရင် bodyအတွင်းမှာ ရှိတဲ့ headings ၊ paragraphs၊ အခြား element တွေကပါ အပြာရောင် ကို သက်ရောက်ပါလိမ့်မယ်။

CSSအသုံးပြုခြင်း

CSS ကို HTML Document ထဲသို့ နည်း၃ နည်း ဖြင့် ထည့်နိုင်ပါတယ်။

1. Inline -style attribute ကို HTML elements အတွင်းမှာ ထည့်ပြီး အသုံးပြုခြင်း။
2. Internal-style element ကို < head > section အတွင်းမှာ ထည့်ပြီး အသုံးပြုခြင်း။
3. External - external css fileကို < link > element ကိုသုံး၍ချိတ်ပြီး အသုံးပြုခြင်း။

ဒီTutorial ထဲမှာ ကျွန်ပ်တို့က inline နဲ့ internal style ကို သုံးလိမ့်မယ်။ ဘာလို့လဲဆိုတော့ ဖော်ပြရတာ လွယ်ကူပြီး try it yourself အသုံးပြုဖို့လည်း သင့်အတွက် လွယ်ကူစေသောကြောင့်ဖြစ်ပါတယ်။

Internal CSS

HTML element တစ်ခုဆို styleတစ်ခု နဲ့ သက်ရောက်ရန်အတွက် inline CSSကို အသုံးပြုပါတယ်။

အောက်ပါ example ကတော့ < h1 > element ရဲ့ စာလုံး အရောင်ကို အပြာရောင်ပေးပြီးတော့ < p > element အတွက်တော့ အနီရောင် ပေးထားပါတယ်။

Example

<h1 style="color:blue;"> A Blue Heading </h1 >
< p style="color:red;" > A red paragraph. < /p >

Try it yourself

Internal CSS

Internal CSSကို HTML pageရဲ့ head section အတွင်းမှာ style element ကိုသုံးပြီး သတ်မှတ်ပါတယ်။

အောက်ပါ exampleကတော့ < h1 > element တွေရဲ့ စာလုံး အရောင်တွေကို အပြာရောင် သတ်မှတ်ပြီး < p > element တွေရဲ့ စာလုံးအရောင်တွေကို အနီရောင် သတ်မှတ်ထားပါတယ်။

Example

< !DOCTYPE html >
< html >
< head >
< style >
body {background-color: powderblue;}
h1{color: blue;}
p{color: red;}
< /style >
< /head >
< body >
< h1>This is a heading < /h1 >
< p>This is a paragraph.< /p >
< /body >
< /html >

Try it yourself

External CSS

External CSSကိုတော့ HTML pagesတွေ အတွက် < style > ကိုသတ်မှတ်ပြီး အသုံးပြုနိုင်ပါတယ်။

External style sheet ကို အသုံးပြုရန် HTML pageတစ်ခုစီ ရဲ့ < head > section အတွင်းမှာ < link > တစ်ခု ကို ထည့်ရပါတယ်။

Example

< !DOCTYPE html >
< html >
< head >
< link rel="stylesheet" href="styles.css" >
< /head >
< body >
< h1 >This is a heading < /h1 >
< p>This is a paragraph.< /p >
< /body >
< /html >

Try it yourself

External CSSကို မည်သည့် text editor မှာမဆို ရေးနိုင်ပါတယ်။အဲ့ဒီ fileကို. css ဆိုတဲ့ file extension နဲ့ saveနိုင်ပါတယ်။

"styles.css"ဆို​တာ...

"styles.css":

body { background-color: blue;
}
h1 {
color: blue;
}
p {
color: red;
}

external cssအတွင်းမှာ, file တစ်ခုကို ပြောင်းလဲခြင်းဖြင့် web siteရဲ့ ပုံစံကို ပြောင်းနိင်ပါတယ်။

CSS Colors, Fonts and Sizes

ဒီမှာ ကျွန်ပ်တို့က CSS properties အချို့ကို သုံးထားသော elements အချိူ့ကို ဖော်ပြလိမ့်မယ်။ ဒါတွေနဲ့ ပတ်သတ်ပြီး နောက်ထပ်ပိုပြီး သင့်ယူနိုင်လိမ့်မယ်။

1. စာလုံးတွေရဲ့ အရောင်အတွက် CSS color property နဲ့ သတ်မှတ်ပါတယ်။

2. စာလုံးတွေအတွက် CSSရဲ့ font-family property နဲ့ သတ်မှတ်ပါတယ်

3. စာလုံးတွေရဲ့ အရွယ်အစားအတွက် CSSရဲ့ font-size property နဲ့ သတ်မှတ်ပါတယ်။

Example

Use of CSS color, font-family and font-size properties:

< !DOCTYPE html >
< html >
< head >
< style >
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
} < /style >
< /head >
< body >
< h1 > This is a heading < /h1 >
< p > This is a paragraph.< /p >
< /body >
< /html >

Try it yourself

CSS Border

HTML element တစ်ခုကို ဘောင်ခတ်ချင်ရင် CSSရဲ့ border property နဲ့ သတ်မှတ်ပါတယ်။

Example

Use of CSS border property:

p {
border: 2px solid blue;
}

Try it yourself

CSS Padding

Web pageရဲ့ ဘောင်နဲ့ web pageအတွင်းရှိ စာလုံးကြား အကွာအဝေးကို padding property နဲ့ သတ်မှတ်ပါတယ်။

Example

Use of CSS border and padding properties:

p {
border: 2px solid blue;
padding: 30px; }

Try it yourself

CSS Margin

Web pageရဲ့ ဘောင်နဲ့ ဘောင်အပြင်ဘက် အကွာအဝေးကို marginနဲ့ သတ်မှတ်ပါတယ်။

Example

Use of CSS border and margin properties:

p {
border: 2px solid blue;
margin: 50px;
}

Try it yourself

Link to External CSS

URL အပြည့်အစုံ (သို့မဟုတ်) လက်ရှိ web pageနဲ့ ဆက်စပ်တဲ့ css file လမ်းကြောင်းနဲ့ external cssကို ညွန်းနိုင်ပါတယ်။

Example

This example uses a full URL to link to a style sheet:

< link rel="stylesheet" href="https://www.w3schools.com/html/styles.css" >

Try it yourself

Example

This example links to a style sheet located in the html folder on the current web site:

< link rel="stylesheet" href="/html/styles.css" >

Try it yourself

Example

This example links to a style sheet located in the html folder on the current web site:

< link rel="stylesheet" href="/html/styles.css" >

Try it yourself

Chapter Summary

1. ဒီexampleကတော့ style sheet တစ်ခုကို full urlနဲ့ linkချိတ်ရန် သုံးထားပါတယ်။

2. လက်ရှိ web site ပေါ် က html folder ထဲက style sheet ကို linkချိတ်ထားပါတယ်။

3. ဒီexampleကတော့ folderတူ အတွင်းမှာရှိတဲ့ style sheet ကို linkချိတ်ထားပါတယ်။

4. Inline styleအတွက် HTML ရဲ့  style attribute ကို သုံးပါတယ်။

5. Intern CSS ကို သတ်မှတ်ရန် HTMLရဲ့ style elementကို သုံးပါတယ်။

6. External CSS fileကို ညွန်းရန်အတွက် HTMLရဲ့ link element ကို သုံးပါတယိ။

7. Style နဲ့ link elementsတွေကို သိမ်းရန် head element ကို သုံးပါတယ်။

8. စာလုံးတွေရဲ့ အရောင်အတွက် CSSရဲ့ color property ကိုသုံးပါတယ်

9. စာလုံးတွေရဲ့ ပုံစံအတွက် CSSရဲ့ font-family property ကို သုံးပါတယ်။

10. စာလုံးတွေရဲ့ အရွယ်အစား အတွက် CSSရဲ့ font-size property ကိုသုံးပါတယ်။

11. ဘောင်ခတ်ရန်အတွက် CSSရဲ့ border property ကိုသုံးပါတယ်။

12. Web pageရဲ့ ဘောင်အတွင်းရှိ အကွာအဝေးအတွက် CSSရဲ့ padding property ကို သုံးပါတယ်။

13. Web pageရဲ့ ဘောင်အပြင်ဘက် အကွာအဝေး အတွက် CSSရဲ့ margin property ကိုသုံးပါတယ်။

HTML Style Tags

Tag	ဖော်ပြချက်
< style >	HTML document တစ်ခုအတွက် style. information နဲ့ သတ်မှတ်ပါတယ်။
< link >	External resourceနဲ့ Document တစ်ခုကြား linkတစ်ခုလို့ သတ်မှတ်ပါတယ်။