CSS (Cascading Style Sheets) is used to style HTML elements.

မဂၤလာပါဗ်ာ........
သိသေလာက္နဲ့ လိုမယ္ထင္တာေလးေတြကို မသိေစတဲ့သူေတြအတြက္ ရည္ရြယ္ၿပီး ေရးသားခြင့္ၿပဳပါ........ဆိုဒ္ေတြထဲ ေရွာက္သြားေနၾကၿပီး သူမ်ားေတြ ပံုစံအမ်ိဳးမ်ိဳးနဲ့ ကြန္မင့္ေပးၾက အလွစဥ္ၾကနဲ့ အားက်မိၾကမွာပါ..........အဲဒီအတြက္ လိုအပ္မယ္ထင္တဲ့ HTML ကုတ္ ေလးေတြကို ေလ့လာမိသေလာက္ ကၽြန္ေတာ္သယ္ငယ္ခ်င္းေတြ အသံုးၿပဳႏိုင္ဖို့ မွ်ေ၀ေပးပါမယ္.....
အရင္ဆံုး HTML ဆိုတာ ဘာကိုေခၚပါသလဲ ဆိုရင္ေတာ့  HTML stands for Hyper Text Markup Language ကိုေၿပာတာပါ........
ဟီးးးးးးလွ်ာရွည္မေနေတာ့ပါဘူး.......HTML ကို ကလိၾကည့္ၾကပါစီု့ေနာ္...........

<div style="border:dotted; ">မဂၤလာပါဗ်ာ........</div>

အနီေရာင္ ေဘာက္ေလးထဲက ကုတ္ကို comment box  အထက္က menu ထဲမွာပါတဲ့ HTML ဆိုတာေလး ကလစ္ၿပီး (သို့) Text box အထက္က menu ထဲမွာပါတဲ့ HTML ဆိုတာေလး ကလစ္ၿပီး (သို့) ပိုစ္ေရးတဲ့ အခါမွာ အထက္ ဘယ္ဘက္ေထာင့္မွာရွိတဲ့ HTML Editor ဆိုတာေလးၿဖစ္ၿဖစ္ ကလစ္ၿပီး ထည့္လိုက္ရင္ ေအာက္ကပံုေတြ့ရမွာပါ

မဂၤလာပါဗ်ာ.........

div style ဆိုတာကေတာ့ selector ပါ...........border ဆိုတာကေတာ့ property ပါ............dotted ဆိုတာက value ပါ..........selector =" proprrty : value ;"
value ကို ကိုၾကိဳက္တဲ့ ပံုေၿပာင္းထည့္ေပးလို့ရပါတယ္........ေအာက္မွာ value နာမည္နဲ့ ပံုေတြပါ

dotted

dashed

solid

double

groove

ridge

inset

outset

border ကို အေရာင္ေလးနဲ့ ၿဖစ္ေစခ်င္ရင္ေတာ့ border-color:red;  ဆိုတာေလးေပါင္းထည့္ေပးလိုက္ပါမယ္ border-color ရဲ့ value ကို စိတ္ၾကိဳက္အေရာင္ေၿပာင္းႏိုင္ပါတယ္ အေရာင္ကုတ္ကိုေတာ့ photoshop ထဲက ကုတ္ဘဲၿဖစ္ၿဖစ္ လိုင္းေပၚမွာ အေရာင္ကုတ္ေတြ အလြယ္တစ္ကူ ရေအာင္ေဖာ္ၿပေပးထားတဲ့ဆ ိုဒ္ေတြလဲရ်ိပါတယ္

<div style="border:dotted ; border-color:red;">မဂၤလာပါဗ်ာ........</div>

အထက္က ကုတ္ကေတာ့ border အေရာင္ အနီ အေၿပာင္းသြားမွာပါ

မဂၤလာပါဗ်ာ........

border ကို ၀ိုင္းလိုက္ခ်င္ရင္ေတာ့ border-radius:100px; ဆိုတာေလး ေပါင္းထည့္ေပးရမွာပါ border-radius ရဲ့ value ကိုလဲ ကို၀ိုင္းေစခ်င္သေလာက္ ခ်ိန္ၿပီးေပးလို့ရပါတယ္

<div style="border:groove ; border-color:red;border-radius:100px;">မဂၤလာပါဗ်ာ........</div>

ဒီလိုေလးၿဖစ္သြားမွာပါ

မဂၤလာပါဗ်ာ........

တစ္ေထာင့္ၿခင္း ၀ိုင္းေစခ်င္ရင္ေတာ့ border-top-left-radius:100px; ဆိုၿပီး ေထာင့္တစ္ခုၿခင္းနာမည္နဲ့ value ထည့္ေပးလို့ ရသလို

    <div style="border: groove; border-color: red; border-top-left-radius:100px;">မဂၤလာပါဗ်ာ........</div>

 border-radius:0 100px 0 100px;  ဆိုၿပီး ေပါင္း ေရးလဲရပါတယ္

     <div style="border: groove; border-color: red;border-radius:0 100px 0 100px;">မဂၤလာပါဗ်ာ........</div>

border ရဲ့ေအာက္မွာ အရိတ္တစ္ခု သို့မဟုတ္ အေရာင္းေလးေတြ ထြက္ေနၿခင္ရင္ေတာ့ box-shadow: 10px 10px 5px #888888;

<div style="border: groove; border-color: red; border-radius: 100px;box-shadow: 10px 10px 5px #888888;">မဂၤလာပါဗ်ာ........</div>

overflow နဲ့ ထည့္ခ်င္ရင္ေတာ့ overflow: auto; ဆိုတာေလးေပါင္းထည့္ေပးလိုက္ပါ............အရြယ္အစားအတြက္ကေတာ့ height: 100px; width: 100px; ၁၀၀ ဆိုတဲ့ value ေတြကို အရြယ္အစားအလိုက္ ၾကီးခ်င္ရင္ မ်ားၿပီး ငယ္ခ်င္ရင္ နဲေပးလိုက္ပါ.....

မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........
မဂၤလာပါဗ်ာ........

ဒီေလာက္ဆိုရင္ေတာ့ မသိေသးတဲ့ ကၽြန္ေတာ္သယ္ခ်င္း ေတြ border နဲ့ box-shadow ကို လွပေအာင္ စိတ္ၾကိဳက္ၿပဳၿပင္ႏိုင္ေလာက္ပါၿပီ.....
အခုေနာက္ခံအေရာင္ ထည့္ဖို့အတြက္ ကေတာ့ background-color:yellow; ဆိုၿပီး ေပါင္းထည့္လိုက္ပါမယ္

<div style="border: groove; border-color: red; border-radius: 100px;background-color:yellow;">မဂၤလာပါဗ်ာ........</div>

အရြယ္အစား အတြက္font-size: 20px; ေနရအတြက္ text-align: center; အေရာင္အတြက္color:blue;

<div style="border: groove; border-color: red; border-radius: 100px;background-color:yellow;font-size: 20px;color:blue;text-align: center;">မဂၤလာပါဗ်ာ........</div>

စာလံုးေတြ ေၿပာင္းၿပန္ၿဖစ္သြားေစခ်င္ရင္ေတာ့ transform: rotateY(180deg); ဆိုတာေလး ေပါင္းထည့္ေပးလိုက္ပါ

<div style="border: groove; border-color: red; border-radius: 100px;background-color:yellow;font-size: 20px;color:blue;text-align: center;">မဂၤလာပါဗ်ာ........</div>

border တစ္ခုလံုး ေစာင္းေနေစခ်င္ရင္ေတာ့transform:rotate(7deg);

<div style="border: groove; border-color: red; border-radius: 100px;background-color:yellow;font-size: 20px;color:blue;text-align: center;">မဂၤလာပါဗ်ာ........</div>

သယ္ခ်င္တို့ေရ property နဲ့ value ကို ေသခ်ာ ေလ့လာၿပီး အခုေဖာ္ၿပေပးလိုက္တာေလးေတြကနဲ့ ကိုယ္တိုင္ေလ့လာ မွတ္သားႏိုင္ၾကပါေစလို့ ဆုေတာင္းေပးလိုက္ပါတယ္ဗ်ာ
ေနာက္ရက္ေတြမွာ သိသေလာက္ ဆက္လပ္ ေဖာ္ၿပေပးသြားပါမယ္.........သယ္ခ်င္းေတြ ေပ်ာ္ရႊင္ၾကပါေစဗ်ာ