CSS ဆိုတာက Cascading Style Sheets ပါ။ style sheet languange ပါ။ CSS ကို Markup Language နဲ့ရေးထားတဲ့ document ပါတဲ့ content တွေကို presentation လုပ်တဲ့အခါ သုံးပါတယ်။
CSS ကို ဝက်စာမျက်နှာတွင် တင်ပြထားတဲ့ content တွေကို (၁) ကြည်ရှု့သူအဆင်ပြေစေရန် content တွေရဲ့ အရွယ်အစား အရောင် နေရာချထားမှု လှုပ်ရှားမှု အလှအပတန်ဆာဆင်ခြင်း၊ (၂) ကွန်ပျူတာ၊ ဖုန်း၊ တက်ဘလက် စသော ပစ္စည်းတွေမှာ အဆင်ပြေပြေ ဖော်ပြနိုင်ရေးအတွက် အချုံ့အချဲ့ ပြုလုပ်ခြင်း စသည့်တွေကို ဖန်းတီးဖို့ presentation အတွက် အသုံးပြုပါတယ်
CSS ကို head ပိုင်းမှာ internal နဲ့ external ဆိုပြီးနည်း (၂) မျိုးထည့်သွင်းနိုင်ပါတယ်
internal မှာ ထပ်ပြီးနည်း (၂) မျိုးကွဲပါသေးတယ် (၁) inline style (၂) inheader style ဆိုပြီးရှိပါတယ်။
html tag အများစုက blog element တွေ ဖြစ်ပါတယ်။ blog element တွေက ဘယ်ကနေညာကို အပြည့်နေရာယူပါတယ် ဒါကြောင့် အချို့နေရာတွေမှာ နေရာချထားဖို့ အခက်အခဲဖြစ်စေပါတယ် ထို့အပြင် html tag တွေကသူတို့ရဲ့ content တွေကို ဖော်ပြတဲ့ မူလအရောင်က အများအားဖြင့်အနက်ဖြစ်ပါတယ် အနက်ရောင်ဖြင့်ပြလို့အဆင်ပြေရင်တော့ကိစ္စမရှိပါဘူး အနက်မလိုချင်ဘူးဆိုရင်တော့ အခက်အခဲဖြစ်ပါပြီ နောက်ပြီး ဝက်စာမျက်နှာ ကိုယ်စားပြုတဲ့ ခေါင်းစဉ်ကို <h1> ကိုအသုံးပြုမယ် အားလုံးကအဆင်ပြေပါတယ် ဒါပေမယ့်ကျွန်တော်က Digital Duty ကို လက်ရှိ စာလုံးကြားအကွာအဝေး ပိုချဲ့ချင်ပါတယ် ခက်တာက html tag မှာ စာလုံးကြားအကွာအဝေး ပြင်ဆင်ဖို့ လုပ်ဆောင်နိုင်ခြင်း မရှိတော့ပါဘူး ၄င်းကဲ့သို့သော အခက်အခဲမျိုး ကို ဖြေရှင်းဖို့က CSS က အဓိကပါ
CSS က html tag တွေကိုချိပ်ဆက်အလုပ်လုပ်ပါတယ် CSS က html tag တွေနဲ့ ချိပ်ဆက်နည်း (၃) မျိုးရှိပါတယ် (၁) element selector (၂) id selector (၃) class selector ဆိုပြီး (၃) မျိုးရှိပါတယ်
element selector က တူတဲ့ html element တိုင်းကိုချိပ်ဆက်အလုပ်လုပ်ပါတယ် ယေဘုယျ လိုအပ်ချက်တွေအတွက်သုံးနိုင်ပါတယ်
ဥပမာ <p> အားလုံးအတွက် တူညီတဲ့လိုအပ်ချက်(စာလုံး အရွယ်အစား)တစ်မျိုးတည်းလိုချင်တယ်ဆိုကြပါစို့ element selector p ကို တည်ဆောက်ပြီး မိမိလိုအပ်သည့် CSS attribute ထည့်လိုက်ပါ ဒါဆိုရင် ဝက်စာမျက်နှာ မှာရှိတဲ့ <p> မှန်သမျှလိုအပ်ချက်အားလုံးပြည်စုံပြီးစီးသွားမှာဖြစ်ပါတယ်
id selector (အိုင်ဒီ စလက်တာ) က html element မှာရှိတဲ့ id attribute နဲ့တူမှချိပ်ဆက်အလုပ်လုပ်ပါတယ် မိမိလို့ချင်တဲ့ သီးသန့် html element အတွက် လိုအပ်ချက်ရှိလျှင် သုံးနိုင်ပါတယ် ဘာလို့လဲဆိုတော့ ဝက်စာမျက်နှာတစ်ခုမှာ မတူညီတဲ့ id attribute တစ်ခုပဲရှိနိုင်လို့ပါ (သို့) တစ်ခုတည်းထားနိုင်လို့ပါ
ဥပမာ <p> တွေ page (ပေ့)မှာအများကြီးပါနေတယ် id selector က သတ်မှတ်ထားတဲ့ id ပါတဲ့ <p> တစ်ခုကိုပဲ ရွေးချယ်ချိပ်ဆက်လုပ်ဆောင်မှာပါ အများအားဖြင့်တော့ id selector နည်းက အသုံးနည်းပါတယ်
class selector ကတော့အသုံးများဆုံးနည်းဖြစ်ပါတယ် ဘာလို့လဲဆိုတော့ အရမ်းစွမ်းအားရှိလို့ပါ
ဥပမာ element selector နည်းမှာတုန်းက တူတဲ့ element တိုင်းနဲ့ပဲချိပ်ဆက်အလုပ်လုပ်နိုင်ပါတယ် class selector က class ရှိတဲ့ element တိုင်းနဲ့ ချိပ်ဆက်အလုပ်လုပ်နိုင်ပါတယ် ဒါ့အပြင် id selector လိုမျိုး သီးသန့်လိုအပ်ချက်တွေအတွက်သုံးမယ်ဆိုလျှင်လည်း မတူတဲ့ class တစ်ခုတည်းဆောက်ပြီး မိမိသီးသန့်ဖြစ်လိုသော element မှာ ထည့်လိုက်ခြင်းဖြင့် အလိုအပ်ချက်တွေပြည်စုံသွားမှာဖြစ်ပါတယ်
CSS မှာ အခြေခံကျတဲ့ attribute အချို့ကို ပြောပါရစေ
DISPLAY
ပထမဆုံးအနေနဲ့ display attribute ကိုပြောပါရစေ ၄င်းကို html element တွေကို နေရာချဖို့ အဓိက အသုံးပြုပါတယ် ၄င်းရဲ့ value ပေါ်မူတည်ပြီး အလုပ်ပုံတွေကွဲပြားပါတယ်
display: block; ပေးထားတဲ့ html element က သူ့ကို wrap အုပ်ထားတဲ့ html element အကျယ်အဝန်း အတိုင်း ဘယ်ကနေညာကိုအပြည့်နေရာယူပါတယ်
display: inline-block; ပေးထားတဲ့ html element က သူ့က wrap ထားတဲ့ အထဲကရှိတဲ့ contnent အကျယ်အဝန်း အတိုင်းသာနေရာယူပါတယ်
display: flex; ပေးထားတဲ့ html element က သူ့က wrap ထားတဲ့ အထဲကရှိတဲ့ contnent တွေကို အပေါ်ကနေအောက်အစဉ်လိုက် html element တွေကို ဘယ်ကနေညာကို အစဉ်လိုက်နေရာယူစေပါတယ် ဘယ်ကနေညာကို အစဉ်ကလိုက်သွာတာက display:flex; ရဲ့ အလိုအလျောက် အစဉ်ဖြစ်ပါတယ် နောက်ပြီး အထဲမှာရှိတဲ့ html element တွေကို inline-block အတိုင်းဖြစ်စေပါတယ်
display: flex; နဲ့အတူ flex-direction:row (or) column ကိုသုံးပြီးတော့လည်း wrap ထားတဲ့ html element တွေကို ဘယ်ကနေညာ (သို့) အပေါ်ကနေအောက် စိတ်ကြိုက်စီစဉ်နိုင်ပါတယ်
MARGIN
margin မှာ top , right, bottom , left အပေါ်၊ ညာ၊ အောက်၊ ဘယ် ဆိုပြီးသုံးနိုင်ပါတယ် margin က သုံးထားတဲ့ html element ရဲ့အပြင်နယ်အဆုံးကနေ အပြင်သို့တွန်းပါတယ်
html element အချင်းချင်း အကွာအဝေးလိုချင်တဲ့အခါသုံးနိုင်ပါတယ်
margin: 5px; က margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;
margin:0 5px; က margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px;
margin:5px 0; က margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px;
ကိုဆိုလိုပါတယ် margin မှာ အခုလိုပေါင်းရေးလို့ရသလို attribute တစ်ခုချင်းစီလည်းရေးလို့ရပါတယ်
PADDING
padding မှာလည်း top, right, bottom, left အပေါ်၊ ညာ၊ အောက်၊ ဘယ် ဆိုပြီးသုံးနိုင်ပါတယ် padding က သုံးထားတဲ့ html element ရဲ့အတွင်းနယ်အဆုံးကနေ အတွင်းကိုတွန်းပါတယ်
html element နယ်အဆုံးနဲ့ အထဲက content အကွာအဝေးလိုချင်တဲ့အခါသုံးနိုင်ပါတယ်
padding ကိုလည်း margin ရေးနည်းအတိုင်းရေးအတိုင်းရေးနိုင်ပါတယ်
WIDTH
width ကို html element ကို ကျယ်သတ်မှတ်ချင်တဲ့အခါအသုံးပြုနိုင်ပါတယ်
HEIGHT
height ကို ကို html element ကို အမြင့်သတ်မှတ်ချင်တဲ့အခါအသုံးပြုနိုင်ပါတယ်
MEDIA QUERY
media query ကို မိမိ ဝက်page (ပေ့) (သို့) ဝက်ဆိုက်ကို ကွန်ပျူတာ၊ ဖုန်း၊ တက်ပလက် စသည့် ပစ္စည်းမျက်နှာပြင်တွေမှာ စနစ်တကျ လှလှပပပေါ်ဖို့ အသုံးပြုနိုင်ပါတယ်
media query မှာ မိမိစိတ်ကြိုက် ပစ္စည်းများရဲ့ မျက်နှာပြင်အကျယ်အဝန်းအလိုက် beak point အကျယ်အဝန်းသတ်မှတ်ချက်များ ထည့်နိုင်ပါတယ်