CSS

CSS (အၚ်္ဂလိက်: Cascading Style Sheets) မ္ဂးဂှ် ဒှ်အရေဝ်ဘာသာ သွက်ဂွံဗၟံက်ထ္ၜး ဗီုပြင်မံင်စံင် (Presentation) မုက်လိက်ဝေပ် မချူလဝ်နကဵု HTML ဟွံသေင်မ္ဂး XML ရ။ CSS ဝွံ နွံတာလျိုင် သွက်ဂွံဖန်ဗဒှ် အရံင် (Color)၊ ဗီုပြင်မလိက် (Fonts)၊ သၞောတ်ဇာ (Grids) ကေုာံ ဓရီု (Layout) နာနာ ညံင်မုက်လိက်ဝေပ် ဂွံနွံကဵု ဒဳဇြာင် ကျေဝ်ဝ်သပ်သပ်ရ။

မုဟိုတ် CSS ဂွံကိစ္စဇၞော်?

ပ္ဍဲနဲကဲဖန်ဗဒှ်ဝေပ်ခေတ်လၟုဟ် CSS ဝွံ ကိစ္စဇၞော်ဗွဲမလောန် ဟိုတ်နူ-

ပွမပါ်ခြာ တာလျိုင် (Separation of Concerns): HTML ဂှ် သုင်စောဲ သွက်ဂွံဒက်ပတန် ပရူပရာ (Content) တုဲ၊ CSS ဂှ် သုင်စောဲ သွက်ဂွံဖန်ဗဒှ် ဒဳဇြာင် (Design) ရ။
ပွမထိင်ဒဝ် လောဲသွာ: ပိုဲပလေဝ်ဒါန်ဖိုင် CSS မွဲဒၞာဲဓဝ်တုဲ မုက်လိက်ဝေပ် လၟိဟ်ကိုဋ်ဂၞေဟ် ဗွဲမဂၠိုင် ပြံင်လှာဲအာအလဵုအလဵုမာန်ရ။
ဓရီု ကိတ်ညဳကုစက် (Responsive Design): CSS ကဵုအခေါင် သွက်ဝေပ်သာ် ဂွံမံက်ကျေဝ်ကျေဝ် သီုပ္ဍဲကောမ်ပျူတာ၊ တေပ်ဗလက် ကေုာံ ဖုင်ဂမ္တေအ်ရ။

ဗီုပြင်သဒ္ဒါ (Syntax)

CSS ကၠောန်ကမၠောန် နကဵုသၞောတ် **Selector** ကေုာံ **Declaration block** ရ။

h1 {
  color: blue;
  font-size: 20px;
}

**Selector (h1):** စၞောန်ကဵု အရာမနွံပ္ဍဲ HTML မပိုဲမိက်ဂွံပလေဝ်။
**Property (color):** အရာပိုဲမိက်ဂွံပြံင်လှာဲ (ဥပမာ - အရံင်)။
**Value (blue):** ၚုဟ်မးတၟိ (ဥပမာ - အရံင်သ္ၚေအ်)။

သၞောတ်ဗဟဵု CSS ဂမၠိုင် (Core Concepts)

၁။ သၞောတ်အနုမာန် (Cascading)

ယၟု "Cascading" ဂှ် ကၠုင်နူနဲကဲ မစဳဇန်လၟေင်ဒြဟတ် (Priority) ရ။ ယဝ်ရနွံကုသၞောဝ် (Rules) ဂၠိုင်နူမွဲမ္ဂး သၞောတ်ဂှ် ဍေဟ်ရုဲစှ်ကေတ် သၞောဝ်မနွံကဵု ဒြဟတ်ခိုင်အိုတ်ရ။

၂။ သၞောတ်ကဠာ (Box Model)

ဇၟာပ်အရာမနွံပ္ဍဲ CSS ဂှ် ဍေဟ်စၟတ်သမ္တီလဝ် နဒဒှ် "ကဠာ" (Box) မွဲမွဲဖအိုတ်ရ။ ဍေဟ်နွံကဵု-

**Content:** ပရူပရာအပ္ဍဲ။
**Padding:** ဒၞာဲသၠးအကြာ ပရူပရာ ကေုာံ ပယျဵု။
**Border:** ပယျဵု (မျာင်)။
**Margin:** ဒၞာဲသၠးမ္ၚးပယျဵု။

၃။ ဖန်ဗဒှ် ဓရီု (Layout)

နဲကဲဖန်ဓရီု အဓိကဂမၠိုင်-

Flexbox: သုင်စောဲ သွက်ဂွံစဳဇန် အရာဂမၠိုင် နကဵုလၟေင်ဓရိုင် ဟွံသေင်မ္ဂး လၟေင်တိုင် လောဲလောဲသွာသွာ။
CSS Grid: သုင်စောဲ သွက်ဂွံဖန်ဗဒှ် ဓရီုမနွံကဵု ၜါကဏ္ဍ (Rows & Columns) မရှုပ်ထေဂမၠိုင်။

ဝင် (History)

CSS ဝွံ စတင်ဗၟံက်ထ္ၜးလဝ် နကဵု Håkon Wium Lie ပ္ဍဲသၞာံ ၁၉၉၄ ရ။

**CSS 1 (၁၉၉၆):** သၞောတ်သ္ဇိုင်ကိုပ်ကၠာအိုတ်။
**CSS 2 (၁၉၉၈):** ထပ်ဗပေင်နဲကဲ ဓရီု (Positioning)။
**CSS 3 (လၟုဟ်):** ပါ်ခြာလဝ် နကဵု Modules နာနာ မပ္တံကဵု Animations, Flexbox ကေုာံ Grid ရ။

ဆက်ဗှ်လ္ၚတ်

နိဿဲဂမၠိုင်

W3C CSS Specifications.
MDN Web Docs. "CSS: Cascading Style Sheets".