Beginner CSS မိတ်ဆက်

CSS ဆိုတာ ဘာလဲ?

CSS (Cascading Style Sheets) ဆိုတာ Webpage တွေကို လှပသွားအောင် ဒီဇိုင်းဖန်တီးပေးတဲ့ ဘာသာစကားတစ်ခုပဲ ဖြစ်ပါတယ်။ HTML သီးသန့်နဲ့ ရေးထားတဲ့ စာသားတွေ၊ ပုံတွေကို အရောင်သွင်းတာ၊ နေရာတွေ သေချာချပေးတာနဲ့ Font အမျိုးအစားတွေ ပြောင်းတာမျိုးတွေကို CSS က လုပ်ဆောင်ပေးပါတယ်။

ဘာလို့ CSS လိုအပ်တာလဲ?

CSS လုံးဝမပါတဲ့ Website တစ်ခုကို ဝင်ကြည့်မယ်ဆိုရင် Word Document အလွတ်တစ်ခုကို ဖတ်နေရသလိုပဲ ပျင်းစရာကောင်းနေမှာပါ။ ဒါကြောင့် CSS ကို သုံးရတာ ဖြစ်ပါတယ်။ CSS က ခင်ဗျားရဲ့ Website ကို ဘယ်လို အကျိုးပြုလဲဆိုရင် -

လှပစေတယ်: လှပတဲ့ အရောင်တွေ၊ ဆွဲဆောင်မှုရှိတဲ့ ဒီဇိုင်းတွေ ထည့်လို့ရပါတယ်။
Responsive ဖြစ်စေတယ်: ဖုန်း၊ တက်ဘလက်၊ ကွန်ပျူတာ စတဲ့ မျက်နှာပြင် အစုံမှာ ကြည့်လို့ကောင်းအောင် (Responsive ဖြစ်အောင်) ပြုလုပ်ပေးနိုင်ပါတယ်။
User Experience ကောင်းစေတယ်: အသုံးပြုသူတွေအတွက် သုံးရလွယ်ကူပြီး ဆွဲဆောင်မှုရှိတဲ့ Website တွေ ဖန်တီးပေးနိုင်ပါတယ်။

CSS ကို ဘယ်လို ရေးမလဲ?

HTML ဖိုင်ထဲမှာ CSS ကို ထည့်ရေးဖို့အတွက် အဓိက ရေးနည်း (၃) မျိုး ရှိပါတယ်။

1. Inline CSS (Tag ထဲမှာ တိုက်ရိုက်ရေးခြင်း)

ဒါကတော့ HTML tag ထဲမှာပဲ style attribute ကို သုံးပြီး တိုက်ရိုက် ရေးလိုက်တဲ့ နည်းလမ်းပါ။

<h1 style="color: blue;">မင်္ဂလာပါ</h1>

2. Internal CSS (Head ထဲမှာ ရေးခြင်း)

ဒါကတော့ HTML ရဲ့ <head> tag အထဲမှာ <style> tag အဖွင့်အပိတ်နဲ့ ရေးတဲ့နည်းလမ်း ဖြစ်ပါတယ်။

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

3. External CSS (သီးသန့် ဖိုင်ခွဲရေးခြင်း) - အကောင်းဆုံး နည်းလမ်း

ဒီနည်းလမ်းကတော့ .css ဖိုင် သီးသန့်တစ်ခု ဆောက်ပြီး HTML ဖိုင်နဲ့ Link ချိတ်ဆက်ပေးတဲ့ နည်းလမ်းပါ။ ဒါက လက်တွေ့လုပ်ငန်းခွင်မှာ အသုံးအများဆုံးနဲ့ အကောင်းဆုံး နည်းလမ်းပဲ ဖြစ်ပါတယ်။

<head>
  <link rel="stylesheet" href="style.css">
</head>

h1 {
  color: green;
}

Video Lesson ဖြင့် လေ့လာရန်

ဒီအကြောင်းအရာတွေကို Video နဲ့ သေချာလေ့လာချင်တယ် ဆိုရင်တော့ အောက်က Video လေးကို ဝင်ကြည့်လို့ ရပါတယ် ခင်ဗျာ။