CSS Lessons
Introduction to CSS
css ရဲ့အခြေခံ (သို့) Cascading Style Sheets တွေ့ကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ အဲ့တာက web sitesတွေ့ web applications ဖန်တီးတဲ့နေရာမယ် design လုပ်ဖို့အတွက် core technologies ဖြစ်ပါတယ်။ web site (သို့) web app ရဲ့ ဘယ်လို့အမျိုးစားကိုမဆို ဆောက်ချင်ရင်ပြသနာ မရှိဘဲ CSS ကို သုံးနိုင်ပါတယ်။ HTML က webpage တစ်ခုရဲ့ structural foundation အဖြစ် လုပ်ဆောင်ပေးပါတယ်၊ အဲ့လို့ပဲ CSS ကတော့ colors, backgrounds, font sizes,layout စတာတွေ့ကို HTML ကို style ရေးပေးရတာ ဖြစ်ပါတယ်။ ကျနော့်တို့က CSSကို အတွင်းကျကျမလေ့လာခင်းမှာ HTML ရဲ့ အခေခြံ structure တွေ့ကို သေချာသိထားရမှာဖြစ်ပါတယ်။ သင့်ဟာ HTML တွေ့ကို သေချာမလေ့လာရသေးဘူးဆိုရင် အရင် html တွေ့ကို ပြန်လေ့လာရမှာ ဖြစ်ပါတယ်။ ပထမဆုံး pageတခုမှာ ရှိတဲ့ css အမျိုးမျိးသုံးပြီး လေ့လာရပါလိမ့်မယ်။ ကောင်းမွန်တဲ့ design layers ကို ရဖို့ ကျနော့်တို့ page ကို basic selectorsဖြစ်တဲ့ css properties နဲ့ values တွေ့ကို သုံးရပါလိမ့်မယ်။ အစမယ် CSS ကို သေချာနားလည်ချင်ရင် ကျနော့်တို့က practice များများလုပ်ဖို့ လုပ်အပ်ပါတယ်။
Improving CSS
css ရဲ့အခြေခံ (သို့) Cascading Style Sheets တွေ့ကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ အဲ့တာက web sitesတွေ့ web applications ဖန်တီးတဲ့နေရာမယ် design လုပ်ဖို့အတွက် core technologies ဖြစ်ပါတယ်။ web site (သို့) web app ရဲ့ ဘယ်လို့အမျိုးစားကိုမဆို ဆောက်ချင်ရင်ပြသနာ မရှိဘဲ CSS ကို သုံးနိုင်ပါတယ်။ HTML က webpage တစ်ခုရဲ့ structural foundation အဖြစ် လုပ်ဆောင်ပေးပါတယ်၊ အဲ့လို့ပဲ CSS ကတော့ colors, backgrounds, font sizes,layout စတာတွေ့ကို HTML ကို style ရေးပေးရတာ ဖြစ်ပါတယ်။ ကျနော့်တို့က CSSကို အတွင်းကျကျမလေ့လာခင်းမှာ HTML ရဲ့ အခေခြံ structure တွေ့ကို သေချာသိထားရမှာဖြစ်ပါတယ်။ သင့်ဟာ HTML တွေ့ကို သေချာမလေ့လာရသေးဘူးဆိုရင် အရင် html တွေ့ကို ပြန်လေ့လာရမှာ ဖြစ်ပါတယ်။ ပထမဆုံး pageတခုမှာ ရှိတဲ့ css အမျိုးမျိးသုံးပြီး လေ့လာရပါလိမ့်မယ်။ ကောင်းမွန်တဲ့ design layers ကို ရဖို့ ကျနော့်တို့ page ကို basic selectorsဖြစ်တဲ့ css properties နဲ့ values တွေ့ကို သုံးရပါလိမ့်မယ်။ အစမယ် CSS ကို သေချာနားလည်ချင်ရင် ကျနော့်တို့က practice များများလုပ်ဖို့ လုပ်အပ်ပါတယ်။
Improving CSS
Web Page က မတူညီတဲ့ layerသုံးခုနဲ့ ဖန်တီးထားပြီးတော့ user တွေ့သုံးတဲ့နေရာမယ် အတူတကွ အသုံးပြုကျပါတယ်။ အဲ့ layer တွေ့ကတော့ content layer, presentation layer, behavior layer တို့ဖြစ်ကျပါတယ်။ HTML က content layer ကို လုပ်ဆောင်နေစဉ်မှာ behavior layerကို read-time userတွေ့အတွက် javascriptက လုပ်ဆောင်ပေးပါတယ်၊ တစ်ဆက်တည်းမှာပဲ CSS က Web Page ရဲ့ presentation layer ကိုလုပ်ဆောင်ပေးပါတယ်။ အဲ့တာက HTML ကိုပိုမိုကောင်းမွန်စေတာ ဖြစ်ပါတယ်။ ကျနော့်တို့ မှတ်ထားရမှာက HTML က presentation language ကို မရည်ရွယ်ပါဘူး၊ ဒါကြောင့် HTML page တခုချင်ဆီရဲ့ conent တွေ့က presentation ကနေပိုင်းခြားထားတဲ့ website ကို ဖန်တီးဖို့ ခက်ခဲတယ်၊ လက်တွေ့မကျဘူး တွေ့ကို ဖြစ်စေပါတယ်။ HTML files တွေတစ်ရာလောက်ရှိတာကို style တစ်ခုထဲသတ်မှတ်ပေးရမယ်ဆိုရင် ပိုပြီးလွယ်ကူတဲ့ ကိုက်ညီတဲ့ နည်းလမ်းများကိုပဲအသုံးပြုရမှာပဲဖြစ်ပါတယ်။ CSS က အဲ့ဒီပြသမာများကြီးကို ဖြေရှင်းဖို့ HTML 4 နဲ့ စတင်မိတ်ဆက်ခဲ့တာဖြစ်ပါတယ်။ CSSကို အသုံးပြုတဲ့အခါမှာတော့ web developer တွေ့က HTML tag အသစ်တွေ့ကို ထပ်မထည့်ဘဲနဲ့ ရေးနိုင်ခဲ့တာဖြစ်ပါတယ်။ Presentation ကနေ content တွေ့ကို sperate လုပ်ခြင်းအားဖြင့် CSS file တခုတည်းကနေ web pages များကြီးကို styling လုပ်ပြီး maintenace လုပ်နိုင်တာ ဖြစ်ပါတယ်။ ယခုအခါမှာဆိုရင် CSS က web ရဲ့ accessibility တိုးတက်လာတာဖြစ်ပါတယ်။ဘာကြောင့်လဲဆိုရင် CSS က devices အမျိုး၊ screen sizesအမျိုးမျိုး၊ resolutions အမျိုးမျိုးကို ခွင့်ပြုပေးလာတာဖြစ်ပါတယ်။ ခု CSS feature တွေ့က Photoshopကဲ့သို့သော graphics editor မှာ သုံးလာနိုင်တော့မှာ ဖြစ်ပါတယ်။ ဘာကြောင့်လဲဆိုရင်တော့ CSS3 က browser design မှာ rounded corners တွေ့၊ box shadowsတွေ့၊ gradientsတွေ့၊ animationsတေ့၊ Flexboxတွေ့ စတင်ပေါ်ပေါက်လာပြီးဖြစ်ပါတယ်။ အဲ့တာကြောင့် designers တွေ့၊ developers တွေ့က websiteကို design ဆောက်ထားတွေ့ ၊ developလုပ်တာတွေ့ ပိုမိုအားကောင်းလာတာဖြစ်ပါတယ်။
CSS sources for References
ကျနော်တို့ဟာ CSS features တွေ့၊ selectors တွေ့၊ prperties နဲ့ value တွေ့ကို အလွတ်ကျက်မှတ်ထားစရာမလိုပါဘူး။ ခုကျနော်တို့က ပထမ HTML နဲ့ CSS projects ကိုရေးတဲ့ခါမှာ code တွေ့ ဘယ် point ရောက်ရင် ဘယ်လို့ရေးသွားတာလဲဆိုတာကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် CSS ကိုမရေးခင် up to date ဖြစ်တဲ့ CSS resources တွေ့ကို လေ့လာရမှာ ဖြစ်ပါတယ်။ CSS ရဲ့ resource တွေ့ထဲ့ကတခုဖြစ်တဲ့ Mozila Developer Network (သို့) MDN Docs က CSS reference တခုဖြစ်ပါတယ်။ အဲ့မှာ standard ကျတဲ့ CSS properties တွေ့ရဲ့ list အားလုံးကို လေ့လာနိုင်ပါတယ်။ ပြီးတော့ alphabetical order စီတဲ့ CSS concepts တွေ့၊ item တစ်ခုချင်ဆီရဲ့ အသေးစိတ်တွေ့ကို MDN Docs က ပေးပါလိမ့်မယ်။ နော်ထပ် resource တစ်ခုကတော့ Web Platform Docs ဖြစ်ပါတယ်။ အဲ့ page မှာတော့ new functions တွေ့ gradient တွေ့ စသည့်ဖြင့် လေ့လာနိုင်ပါတယ်။ နောက်ထပ်တခုကတော့ W3C လို့ခေါ်တဲ့ World Wid Web Consortium ပဲဖြစ်ပါတယ်။ W3C ကတော့ web standards တွေ့ကို developလုပ်တဲ့၊ maintainence လုပ်တဲ့ group ဖြစ်ပြီး၊ up to date CSS features တွေ့ကို လေ့လာနိုင်ပါတယ်။
Inline CSS styles
page တစ်ခုထဲကို CSS တွေအမျိုးမျိုးနည်းလမ်းတွေ့နဲ့ ထည့်သွင်းပြီး ရေးနိုင်ပါတယ်။ နည်းလမ်းတခုချင်ဆီမယ်တော့ ကောင်းတာတာတွေ့ ဆိုးတာတွေ့ တော့ ရှိကျပါတယ်။ CSS အသုံးချနိုင်တဲ့ နည်းလမ်းသုံးမျိုးရှိပါတယ်။ အောက်မှာဖော်ပြထားတဲ့ eg မှာဆို heading tag၊ paragraphs tag၊ textတွေ့ရဲ့ lines ကြားမယ် အဖြူရောင် space လေးတွေ့ပါနေတာကို တွေ့ရပါလိမ့်မယ်။ အဲ့တာက ဘာလို့လဲဆိုရင် browserက default ပါတဲ့ style ဖြစ်ပါတယ်။ အဲ့တာကြောင့် ကျနော့်တို့က ပထမဦးဆုံး ရိုးရှင်းတဲ့ style ရေးမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် page ကို affect သက်ရောက်မဲ့ idea ကောင်းတဲ့ CSS ကိုရနိုင်မှာ ဖြစ်ပါတယ်။ ဒါကြောင့် ကျနော့်တို့ designersတွေ့၊ developersတွေ့က author syles ကို ဖန်တီးတာဖြစ်ပါတယ်။ အဲ့နည်းလမ်းတွေ့ကတော့ inline, internal , external တို့ဖြစ်ပါတယ်။ ပထမအနေနဲ့ inline style ရေးတဲ့ခါမှာ style attribute ကိုသုံးပြီးတော့ html file ရဲ့element tag ထဲ့မယ် တိုက်ရိုက်ရေးရမှာ ဖြစ်ပါတယ်။ အောက်မှာဖော်ပြထားတဲ့ eg လို့ပဲ body element ရဲ့ style attribute ထဲမယ် quotation marksရေးရပြီး သူ့ထဲမယ်မှ background-colorရဲ့နောက်က colon (:) နဲ့ space တချက်လိုက်ပြီ orange နဲ့ semicolon တို့ကိုရေးရမှာ ဖြစ်ပါတယ်။ ဥပမာ - <body style="background-color: orange;"> ။ ယခု html file ကို save ပြီ browser မှာ refresh လုပ်ပြီ ကြည့်နိုင်ပါတယ်။ အဲ့လို့ပဲ အခြား element တွေ့အကုန်လုံးလည်း inline style method ကိုသုံးပြီတော့ styling လုပ်နိုင်ပါတယ်။ ဒါပေမဲ့ inline style method ကိုတော့ အမြဲသုံးဖို့ မတိုက်တွန်းပါဘူး။ ဘာလို့လဲဆိုတော့ website ကို develop လုပ်နေတဲ့ချိန်မှာဆို inline styles တွေ့က ကောင်းတဲ့အလေ့အကျင့် မဟုတ်ပါဘူး။ ဘာကြောင့်လဲထပ်ပြောရရင် ကျနော်တို့က style changes ရှိလာရင် inline ရေးထားတဲ့ html ရဲ့ element tag တိုင်းကို လိုက်ပြီchanges လုပ်ပေးရမှာဖြစ်ပါတယ်။ အဲ့လို့အခြေနေမျိုးဆိုရင် maintenance လုပ်ရတာ ခက်ခဲသွားမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် အဲ့လိုမျိုး inline styles ရေးခြင်းက level နိမ့်ပီတော့ လက်တွေ့ကျအသုံးပြုဖို့ မကောင်းပါဘူး။ ဆိုလိုတာက element ထဲ့ကို တခြား stylesတွေ့ဖြစ်တဲ့ internal (သို့) external style တွေ့သုံးခြင်းက overrideဖြစ်မှာ ဖြစ်ပါတယ်။ ဒါပေမဲ့ HTML နဲ့ CSS mockups တို့ဖန်တီးပြီတဲ့အခါမှာတော့ inline stylesတွေ့ကို သုံးနိုင်ပါတယ်။ Debugging လုပ်ဖို့ (သို့) temporary fixes လုပ်ဖို့ဆိုရင်တော့ inline style ကိုသုံးနိုင်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
</head>
<body style="background-color: orange;"> <!-- adding inline style -->
<header>
<span>Journey through the Sierra Nevada Mountains</span>
<h1 style="color: white;">Lake Tahoe, California</h1>
</header>
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
</body>
</html>
Output Here
Internal CSS styles
နေက်ထပ်နည်းလမ်းတခုကတော့ internal styles နဲ့ page ထဲ့ကို CSS ထည့်နိုင်မှာဖြစ်ပါတယ်။ Internal styles က HTML document ရဲ့ head section ထဲ့မယ် အများအားဖြင့်ထည့်ရေးရတာဖြစ်ပါတယ်။ head tag ထဲ့မယ်မှ style tag ကို သတ်မှတ်ရတာ ဖြစ်ပါတယ်။ အောက်မှာ ဖော်ပြထားတဲ့ eg လို့ပဲ style tag ထဲမယ် p ရေးပြီ သူ့နောက်က curly braces({ }) လိုက်ပြီ တစ်ချို့သော white space ဖန်တီးဖို့ enter ခေါက်ပေးရမှာ ဖြစ်ပါတယ်။ အဲ့ထဲမယ်မှ css properties တွေ့ထည့်မှာဖြစ်ပါတယ်။ css properties ဖြစ်တဲ့ font-size ဆိုပြီ သူ့နောက်က colon နဲ့ space တချက်လိုက်ပြီ value ဖြစ်တဲ့ 20 px နဲ့ semicolon(;) တို့ရေးမှာဖြစ်ပါတယ်။နောက်ထပ် properties နဲ့ value ထပ်ထည့်ချင်ရင် enter တချက်ခေါက်ပီ font-weight စတဲ့ properties တွေ့ value တွေ့ စောစောကလို့ရေးနည်းနဲ့ ရေးနိုင်ပါတယ်။ ကျနော့်တို့ css styles တွေ့ ရေးပီပီဆိုရင်တော့ html file ကို save ပြီ browser မှာ refresh လုပ်ပီကြည့်နိုင်ပါတယ်။ Browser run ပြီတဲ့ချိန်ဆို ကျနော်တို့သတိထားရမှာက စောစောက ရေးခဲ့တဲ့ css styles တွေ့အလုပ်လုပ်ရလားဆိုတာကို သတိထားရမှာ ဖြစ်ပါတယ်။ internal styles တွေ့အသုံးပြုခြင်းကလည်း testing site လောက်အတွက်ပဲ ကောင်းပါတယ်။ ဒါပေမဲ့ Developing sites တွေ့အတွက်တော့ ကောင်းတဲ့အလေ့ကျင့်မဟုတ်ပါဘူး။ ဘာကြောင့်လဲဆိုတော့ styles တွေ့က HTML file အတွင်းထဲမယ် ရေးထားလို့ဖြစ်ပါတယ်။ HTML files တွေ့က project ပေါ်မှီခိုပြီတော့ page တခါ load တိုင်း styles တွေ့ကို download ချနေတာဖြစ်ပါတယ်။ ဆိုလိုတာက page တခုနဲ့တခု style တူရဲ့သားနဲ့ ဒီpage မှာလည်း style ရေးရ၊ တစ်ခြား page မှာလည်း style သွားရေးရနဲ့ အာ့ကြောင့်မို့ဖြစ်ပါတယ်။ အောက်မှာ ဖော်ပြထားတဲ့ eg မှာ လေ့လာနိုင်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding internal style -->
<style>
body{
background-color: orange;
}
p{
font-size: 20px;
font-weight: bold;
}
h1{
color: white;
}
</style>
</head>
<body>
<header>
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
</body>
</html>
Output Here
External CSS Styles
ကျနော်တို့ inline styles နဲ့ internal styles တွေကိုလေ့လာခဲ့ပြီးဖြစ်ပါတယ်။အဲ့ဒီ style တွေကို ကြီးမားတဲ့ projects တွေတည်ဆောက်တဲ့အခါမှာအသုံးပြုလို့အဆင်မပြေပါဘူး။ ဘာကြောင့်လဲဆိုရင်တော့ presentation မှ content တွေ့ကို sperate မလုပ်နိုင်လို့ဖြစ်ပါတယ်။ နောက်ထပ် ကျနော်တို့ရဲ့ project size ပေါ်မှီခိုနေပြီတော့ maintenance လုပ်ဖို့ ခက်ခဲ့လို့ဖြစ်ပါတယ်။ HTML file ထဲ့မယ် CSS ရေးမယ့်အစား ကျနော်တို့ရဲ့ page ထဲ့ကို external stylesheet ထည့်ပေးမှာဖြစ်ပါတယ်။ external stylesheet ရေးမယ်ဆိုရင် ကျနော်တို့က .css file extension တခုဆောက်ရမှာဖြစ်ပါတယ်။ဆောက်ပြီပြီဆိုရင် HTML tag ရဲ့ head tag ထဲမယ် link tag နဲ့ external css ဖိုင်းကို ခေါ်ပေးရမှာဖြစ်ပါတယ်။ link tag မယ်ဆိုရင် rel attribute နဲ့ href attribute တို့ပါဝင်ပေးရမှာဖြစ်ပါတယ်။ rel attribute ထဲမယ် stylesheet value ထည့်ပေးရပြီ href attribute ထဲမယ်တော့ ကျနော်တို့ဆောက်ခဲ့တဲ့ css file ရှိတဲ့ အပြည့်စုံလမ်းကြောင်းခေါ်ပေးရမှာ ဖြစ်ပါတယ်။ အောက်မှာ eg နှင့်တကွ ဖော်ပြပေးထားပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding external style -->
<link rel="stylesheet" href="css/externalstyle.css">
</head>
<body>
<header>
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
</body>
</html>
Output Here
Two imports for External Style Sheet
external style sheet တွေ့သုံးပြီ နောက်ထပ်တခြား method ကတော့ CSS statement တစ်ခုဖြစ်ပါတယ်။ ဒါကြောင့် တစ်ခြားသော style sheets ကနေ import CSS ကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ သူကို ဘယ်လို့ရေးရမလဲဆိုရင် HTML ရဲ့ head tag ထဲမယ် link tagအောက်မှာ style ဆောက်ပြီတော့ သူ့ထဲမယ် @import နောက်က quotes တစုံပါဝင်ပြီ နောက်ဆုံးမှာ smicolon ပါရမှာဖြစ်ပါတယ်။ quotes တစုံထဲမှာမှ တိကျတဲ့ path နဲ့ တိကျတဲ့ css file ကို ခေါ်ပေးရမှာ ဖြစ်ပါတယ်။ အဲ့လို့ရေးပြီသွားပြီဆိုရင် html file ကို save လုပ်ပြီ import လုပ်ထားတဲ့ style တွေ့တကယ်လုပ်မလုပ် browser မယ် refresh လုပ်ပြီ သတိထားကြည့်ရမှာ ဖြစ်ပါတယ်။ နောက်ထပ် style sheet ထဲမယ်ပဲ import style sheet လုပ်နိုင်ပါသေးတယ်။ သူ့ကို import လုပ်မယ်ဆိုရင် style sheet ရဲ့ ထပ်ဆုံးမယ် ထည့်ပေးရမှာ ဖြစ်ပါတယ်။ ခုကျနော်တို့ အရေးကြီးတာမှတ်ထားရမှာက import statement က style sheet မှာရှိတဲ့ CSS style ထပ် အလုပ်လုပ်တဲ့နေရာမယ် အရင်လုပ်ဆောင်ပေးတာဖြစ်ပါတယ်။ css file တခုကို directory link နဲ့မခေါ်ဘဲ import နဲ့ခေါ်မယ်ဆိုရင် browser မယ်တော့ ဘာမှပြောင်လဲသွားမှာ မဟုတ်ပါဘူး။ သူတို့နှစ်ခုရဲ့ ခြားနားချက်က HTML file အစား style sheet import လုပ်ခြင်းက အလုပ်လုပ်တာ စောပါတယ်။ ဒါကြောင့် အမျိုးမျိုးသော styles တွေ့ဆီကို ကျနော်တို့ရဲ့ CSS တွေ့ကို sperateလုပ်ထားခြင်းအားဖြင့် import method က ကျနော်တို့ရဲ့ CSSကို စံကျအောင်ပြုလုပ်ပေးတာဖြစ်ပါတယ်။ ဒါကြောင့် page က main style sheet ကို ချိတ်ဆက်နေစဉ် style sheet က တခြား style sheets မှာရှိတဲ့ base styles layout, typography စသည်ဖြင့် တို့ကို import လုပ်လို့ပြောပြီသွားပြီ။ ခုလို့ import method သုံးခြင်းက site performance ကို ကျဆင်းစေပါတယ်။ ဘာကြောင့်လဲဆိုတော့ အဲ့ဒီ import statements တခုချင်ဆီက server ဆီကို new request လိုအပ်လို့ဖြစ်ပါတယ်။ အဲ့လို့မျိုး request တွေ့များလာရင် server load time က ကြာနိုင်ပါတယ်။ CSS က stylesheet language ဖြစ်ပြီတော့ web page တခုရဲ့ layer တွေကို presentation လုပ်နိုင်တာဖြစ်ပါတယ်။ document ရဲ့head tag ထဲ့မယ် CSS ကို အမျိုးမျိုးအသုံးပြုနိုင်ပြီတော့ exteranl stylesheet ကတော့ အကောင်းဆုံးနည်းလမ်းဖြစ်ပါတယ်။ အောက်မှာ ဥပမာနှင့်တကွ ဖော်ပြပေးထားပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding external style -->
<link rel="stylesheet" href="css/externalstyle.css">
</head>
<body>
<header>
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
</body>
</html>
externalstyle.css
@import "import-css.css";
body{
background-color: orange;
}
p{
font-size: 20px;
font-weight: bold;
}
h1{
color: white;
}
Output Here
Type Selectors
ယခု CSS selector တွေ့သတ်မှတ်ထားတဲ့ အမျိုးမျိုးသော နည်းလမ်းတွေ့ကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ Selector က element type တွေ့ရဲ့ class နဲ့ id attribute တို့ပေါ် အခေခြံထားတာဖြစ်ပါတယ်။ ဒါပေမဲ့ CSS selector တွေ့ဘယ်လို့လုပ်တာလဲဆိုတာကို မလေ့လာခင် CSS rule တွေ့အကြောင်းလေ့လာသွားမှာ ဖြစ်ပါတယ်။ CSS rules တွေက browsers ကို HTML elments ဘယ်လို့ပေါ်ကွာလို့ပြောတာဖြစ်ပါတယ်။ CSS rule က အဓိက နှစ်ပိုင်းနဲ့ ဖွဲ့စည်းထားတာဖြစ်ပြီတော့ selector ရဲ့နောက်က declaration block လိုက်တာဖြစ်ပါတယ်။ Selector က CSS rule ရဲ့ အစိတ်ပိုင်းဖြစ်ပြီတော့ HTML elementsကို ဦးတည်တာဖြစ်ပါတယ်။ ခု selector က declaration block ဖြစ်လာပြီတဲ့နောက်မှာ curly brace နဲ့စပြီ curly brace နဲ့ ဆုံးပါတယ်။ select လုပ်ထားတဲ့ declaration တခုချင်ဆီမယ် property name နဲ့ value တို့ပါဝင်ပါတယ်၊ သူတို့ကို colon နဲ့ပိုင်းခြားထားပါတယ်။ property က element ရဲ့ ကျနော့်တို့ ပြောင်ချင်တဲ့ အပိုင်းဖြစ်ပြီတော့ value က ဘယ်လို့ပြောင်လဲပါဆိုတာကို ပြောတာဖြစ်ပါတယ်။ Selectors က CSSရဲ့ အရေးကြီးတဲ့အပိုင်းရယ် အားကောင်းတဲ့ အပိုင်းတို့ထဲ့က တစ်ခုဖြစ်ပါတယ်။ အောက်မှာ ဖော်ပြထားတဲ့ eg မယ် အသေးစိတ်လေ့လာနိုင်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding external style -->
<link rel="stylesheet" href="css/typeselector.css">
</head>
<body>
<header>
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
</body>
</html>
typeselector.css
*{
margin: 0;
padding: 0;
color: red;
}
Output Here
ID Selector
type selector ကိုမကြိုက်ဘူးဆိုရင် ကျနော်တို့ target ထားချင်တဲ့ element မှာ unique ဖြစ်တဲ့ ID ကိုသတ်မှတ်ပြီ ID selector ကိုသုံးနိုင်ပါတယ်။ အဲ့နည်းလမ်းက ID attribute ပေါ်အခေခြံပြီ target ထားတဲ့element ကိုလုပ်ဆောင်ပါတယ်။ ID selectors တွေ့က html file မယ် ကိုယ်ထားချင်တဲ့ target ရဲ့ id attributeမယ် valuename ထည့်ပေးရပါတယ်။ CSS မယ် ကျနော်တို့က selectလုပ်ချင်ရင် pound symbol(#) နောက်က id ရဲ့value လိုက်ပါတယ်။ ကျနော်တို့အောက်မှာ ဖော်ပြထားတဲ့ ဥပမာထဲမယ်တာ့ id ကို primary dash contentပေးပြီတော့ declaration block နဲ့အတူ selectလုပ်မှာဖြစ်ပါတယ်။ အစောက ဥပမာလိုပဲ curly braces ထဲမယ် border ဆိုတဲ့ property ထည့်ပြီ သူ့ရဲ့ value ကတော့ 3px solid red; ။ အသေးစိတ်ကိုတော့ ဥပမာမယ် လေ့လာနိုင်ပါတယ်။
Example of HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding external style -->
<link rel="stylesheet" href="css/typeselector.css">
</head>
<body>
<header id="top">
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<div id="primary-content">
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
<h2>Check out all wildlife</h2>
<p>
As spawning season appproaches the fish acquire a humpback and protuberant jaw.
After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>
, <a href="#" class="#">bears</a>, and <a href="#">Bald eagles</a>.
</p>
<a href="#" class="callout">See the Wildlife.</a>
</div>
<div>
<h3>From Tents to Resorts</h3>
<p>
Lake Tahoe is full of wonderful places to stay.You have the ability to sleep
in the outdoors in a tent, or relax like a king at a five star resort.Here are our top
three resorts:
</p>
<ul>
<li><a href="#">Lake Tahoe Resort Hotel</a></li>
<li><a href="#">South Lake Tahoe Resorts</a></li>
<li><a href="#">Tahoe Ski Resort Lodging</a></li>
</ul>
<h3>Pack Accordingly</h3>
<p>One of most important things when it comes to traveling through the great outdoors is packing accordingly.Here are a few tips:
outdoors is packing accordingly.Here are a few tips:
</p>
<ol>
<li>Bring Layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div>
<footer id="main-footer">
<p>All right reserved to the state of <a href="#">California</a>.</p>
<a href="#top">Back to Top »</a>
</footer>
</body>
</html>
Example of CSS file
body{
color: #878787;
margin: 0;
}
header{
background-color: orange;
}
h1{
font-size: 90px;
color: white;
}
h2{
font-size: 53px;
}
h3{
font-size: 20px;
color: #48525c;
}
p{
color: white;
background-color: lightblue;
}
#primary-content{
border: 3px solid red;
Output Here
Class Selector
Class Selectors က id selector နဲ့တူပါတယ်။ Class selectors တွေ့က class attribute ပေါ်အခြေခံပြီ target elements တွေ့ဖြစ်ပါတယ်။ ခု class နဲ့ id selector တို့ခြားနားချက်က id selector က unique ဖြစ်ပါတယ်။ဒါကြောင့် page တခုပေါ်မှာ element တခုကိုပဲ သတ်မှတ်ဖို့ သုံးတာဖြစ်ပါတယ်။ element တစ်ခုထက်ပိုပြီသတ်မှတ်ချင်ရင်တော့ classကိုသုံးနိုင်ပါတယ်။ classes တွေ့က id ထက်ပိုပြီ flexible ဖြစ်ပါတယ်။ ကျနော်တို့ရဲ့ css fileထဲမယ် class selctor က dot စပြီ သူရဲ့နောက်မှာ class name လိုက်တာဖြစ်ပါတယ်။ စောစောကeg လိုပါပဲ id selector နေရာမယ် class selector အစားထိုးပေးလိုက်ရင် ရပါပြီ။ css file မယ်ကျတော့ pound sign(#) နေရာမယ် dot(.) အစားထိုးပေးရမှာ ဖြစ်ပါတယ်။ class selector ကိုသုံးပြီတော့ များပြားလှတဲ့ elements တွေ့မှာ တူညီတဲ့ class တွေ့သုံးနိုင်ပါတယ်။ မှတ်ထားရမှာက id selector က အဲ့လို့မျိုးတွေ့ကို ခွင့်မပြုပါဘူး။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding external style -->
<link rel="stylesheet" href="css/class_selector.css">
</head>
<body>
<header id="top" class="main-header">
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<div class="primary-content">
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
<h2>Check out all wildlife</h2>
<p>
As spawning season appproaches the fish acquire a humpback and protuberant jaw.
After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>
, <a href="#" class="#">bears</a>, and <a href="#">Bald eagles</a>.
</p>
<a href="#" class="callout">See the Wildlife.</a>
</div>
<div class="secondary-content">
<h3>From Tents to Resorts</h3>
<p>
Lake Tahoe is full of wonderful places to stay.You have the ability to sleep
in the outdoors in a tent, or relax like a king at a five star resort.Here are our top
three resorts:
</p>
<ul>
<li><a href="#">Lake Tahoe Resort Hotel</a></li>
<li><a href="#">South Lake Tahoe Resorts</a></li>
<li><a href="#">Tahoe Ski Resort Lodging</a></li>
</ul>
<h3>Pack Accordingly</h3>
<p>One of most important things when it comes to traveling through the great outdoors is packing accordingly.Here are a few tips:
outdoors is packing accordingly.Here are a few tips:
</p>
<ol>
<li>Bring Layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div>
<footer id="main-footer">
<p>All right reserved to the state of <a href="#">California</a>.</p>
<a href="#top">Back to Top »</a>
</footer>
</body>
</html>
body{
color: #878787;
margin: 0;
}
.main-header{
background-color: orange;
}
h1{
font-size: 90px;
color: white;
}
h2{
font-size: 53px;
}
h3{
font-size: 20px;
color: #48525c;
}
p{
color: white;
background-color: lightblue;
}
.primary-content{
text-align: center;
}
.secondary-content{
border-top: 2px solid lightgray;
}
#main-footer{
padding: 60px 0;
border-bottom: solid 10px orange;
}
Output Here
Multiple Class
ကျနော်တို့ အရင်သင်ခန်းစာတော့က element တစ်ခုမှာ id selector တစ်ခု နဲ့ class selector တစ်ခု တို့ကိုလေ့လာခဲ့ပြီဖြစ်ပါတယ်။ ယခုအခါမှာတော့ element တစ်ခုမယ် classes တွေ့များကြီးသတ်မှတ်လို့ရတယ်ဆိုတာကိုး လေ့လာသွားမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် multiple classes ကိုသုံးပြီ အောက်မှာ ဖော်ပြထားတာကို လေ့လာနိုင်ပါတယ်။ ကျနော်တို့အစောက ရေးခဲ့တဲ့ eg မှာပဲ primary-content,secondary-content,main-footer တို့မယ် property တွေထပ်ခါထပ်ခါ ရေးမယ့်အစား သူတို့အတွက် နော်ထပ်class ဆောက်ပီအဲ့ထဲမယ်ပဲ သွားရေးသင့်တာဖြစ်ပါတယ်။ multiple class ရေးပုံရေးနည်းကတော့ class attribute ရဲ့ value မှာ ကိုယ်ဆောက်ချင်သလောက် space တစ်ချက်ခြားပြီ နောက်ထပ်ရေးနိုင်တာဖြစ်ပါတယ်။ element တစ်ခုမယ် class attribute ကော id attribute ကော နှစ်ခုလုံးသုံးနိုင်ပါတယ်။ ဒါပေမဲ့ class attribute နဲ့ id attribute မယ် တူညီတဲ့ style property ရေးထားမိတယ်ဆိုရင် id မှာရေးခဲ့တဲ့ style property ကအလုပ်လုပ်ပါလိမ့်မယ်။ အဲ့တာက ဘာလို့လဲဆိုရင် ID က class ထပ်weight ပိုလိုဖြစ်ပါတယ်။ ဘာကြောင့်ပိုတာလဲဆိုရင် ID က အလွန်တိကျလို့ ဖြစ်ပါတယ်။ ဒါကြောင့် element တစ်ခုမှာ id ကော class ကော အသုံးချရင် ID selector မှာရှိတဲ့ style က class selector မယ်ရှိတဲ့ style ထပ်အမြဲတမ်း weight ပိုနေမှာ ဖြစ်ပါတယ်။ ပြီတော့ ကျနော်တို့က classes နဲ့ id တို့ကို ဘယ်လိုသုံးရမလဲ သေချာမသိဘူးဆိုရင် class selectors မှာရှိတဲ့ style ကို override အလုပ်ခံရမှာ ဖြစ်ပါတယ်။ ဥပမာ-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding external style -->
<link rel="stylesheet" href="css/class_selector.css">
</head>
<body>
<header id="top" class="main-header">
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<div class="primary-content t-border">
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
<h2>Check out all wildlife</h2>
<p>
As spawning season appproaches the fish acquire a humpback and protuberant jaw.
After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>
, <a href="#" class="#">bears</a>, and <a href="#">Bald eagles</a>.
</p>
<a href="#" class="callout">See the Wildlife.</a>
</div>
<div class="secondary-content t-border">
<h3>From Tents to Resorts</h3>
<p>
Lake Tahoe is full of wonderful places to stay.You have the ability to sleep
in the outdoors in a tent, or relax like a king at a five star resort.Here are our top
three resorts:
</p>
<ul>
<li><a href="#">Lake Tahoe Resort Hotel</a></li>
<li><a href="#">South Lake Tahoe Resorts</a></li>
<li><a href="#">Tahoe Ski Resort Lodging</a></li>
</ul>
<h3>Pack Accordingly</h3>
<p>One of most important things when it comes to traveling through the great outdoors is packing accordingly.Here are a few tips:
outdoors is packing accordingly.Here are a few tips:
</p>
<ol>
<li>Bring Layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div>
<footer class="main-footer t-border">
<p>All right reserved to the state of <a href="#">California</a>.</p>
<a href="#top">Back to Top »</a>
</footer>
</body>
</html>
body{
color: #878787;
margin: 0;
}
.main-header{
background-color: orange;
}
h1{
font-size: 90px;
color: white;
}
h2{
font-size: 53px;
}
h3{
font-size: 20px;
color: #48525c;
}
p{
color: white;
background-color: lightblue;
}
.primary-content{
text-align: center;
}
#main-footer{
padding: 60px 0;
border-bottom: solid 10px orange;
}
.t-border{
border-top: 2px solid lightgray;
}
Output Here
Descendant Selector
CSS တွေ့က HTML document မှာ သူတို့ရဲ့ဆက်နွယ်မှုတွေ့ကို အခြေခံပြီ target elementsလုပ်နိုင်ပါတယ်။ ကျနော်တို့ခေါ်တဲ့ descendent selector ကိုဖန်တီးဖို့ selector တွေ့ကို ပေါင်းနိုင်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ element တစ်ခုကို ဦးတည်ပြီတော့ တစ်ခြားသော element ကိုကျ လျော့ချချင်လို့ ဖြစ်ပါတယ်။ အဲ့တာက ကျနော်တို့ရဲ့ selectorsကို ပိုပြီးတိကျစေတာဖြစ်ပါတယ်။ ဒါကြောင့် အောက်မှာဖော်ပြထားတဲ့ header element အတွင်းမယ်ရှိတဲ့ span element ကိုသတိထားကြည့်ပေးပါ။ ယခု ကျနော်တို့ descendant selector ကိုသုံးပြီတော့ header element အောက်မှာရှိတဲ့ span element ကိုလုပ်ပြမှာ ဖြစ်ပါတယ်။ Descendant selector ကို ဖန်တီးဖို့ ကျနော်တို့က selectors နှစ်ခုအနည်းဆုံးလိုအပ်ပြီတော့ သူတို့ကို အဖြူရောင် spaceနဲ့ခြားပေးရမှာ ဖြစ်ပါတယ်။Descendant selector က type selector တစ်ခုတည်းကိုပဲ ကန့်သတ်ထားတာမဟုတ်ပါဘူး။ Class selector , ID selector တို့နဲ့လည်း ပိုင်းခြားနိုင်ပါတယ်။ Descendant selector ကို style lists တို့မှာ ပိုအသုံးများပါတယ်။ ဥပမာ- ul li{ background-color: tomato; } ။ အသေးစိတ်ကိုတော့ အောက်က ဥပမာမှာ ပြသထားပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding external style -->
<link rel="stylesheet" href="css/descendant_selector.css">
</head>
<body>
<header id="top" class="main-header">
<span class="title">Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<div class="primary-content t-border">
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
<h2>Check out all wildlife</h2>
<p>
As spawning season appproaches the fish acquire a humpback and protuberant jaw.
After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>
, <a href="#" class="#">bears</a>, and <a href="#">Bald eagles</a>.
</p>
<a href="#" class="callout">See the Wildlife.</a>
</div>
<div class="secondary-content t-border">
<h3>From Tents to Resorts</h3>
<p>
Lake Tahoe is full of wonderful places to stay.You have the ability to sleep
in the outdoors in a tent, or relax like a king at a five star resort.Here are our top
three resorts:
</p>
<ul>
<li><a href="#">Lake Tahoe Resort Hotel</a></li>
<li><a href="#">South Lake Tahoe Resorts</a></li>
<li><a href="#">Tahoe Ski Resort Lodging</a></li>
</ul>
<h3>Pack Accordingly</h3>
<p>One of most important things when it comes to traveling through the great outdoors is packing accordingly.Here are a few tips:
outdoors is packing accordingly.Here are a few tips:
</p>
<ol>
<li>Bring Layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div>
<footer class="main-footer t-border">
<p>All right reserved to the state of <a href="#">California</a>.</p>
<a href="#top">Back to Top »</a>
</footer>
</body>
</html>
body{
color: #878787;
margin: 0;
}
.main-header{
background-color: orange;
}
.title{
color: white;
font-size: 26px;
}
ul li{
background-color: tomato;
color: white;
margin-bottom: 5px;
}
h1{
font-size: 90px;
color: white;
}
h2{
font-size: 53px;
}
h3{
font-size: 20px;
color: #48525c;
}
p{
color: white;
background-color: lightblue;
}
.primary-content{
text-align: center;
}
#main-footer{
padding: 60px 0;
border-bottom: solid 10px orange;
}
.t-border{
border-top: 2px solid lightgray;
}
Output Here
Pseudo Class
Pseudo-classes တွေ့က classesတွေနဲ့ ဆင်တူပါတယ်။ ခြားနားချက်ကတော့ element class attribute မှာ အတိအလင်းသတ်မှတ်မထားပါဘူး၊ ပြီတော့ class လိုမျိုး source code မှာမပေါ်ပါဘူး။ ID selector , class selectors တို့နဲ့မတူတာက pseudo-classes က user interaction ပေါ်မှာ အခြေခံပြီတော့ element ရဲ့ state တွေ့ကို dynamically ပြောင်းနိုင်ပါတယ်။ Pseudo-class ကို keyword အဖြစ်တွေ့ထားပြီတော့ element တခုရဲ့ special stateတွေ့ကို style လုပ်ဖို့ ထည့်နိုင်ပါတယ်။ Mozila developer network (သို့) MDN docs မှာ standard ကျတဲ့ pseudo-classes lists တွေ့ကြည့်နိုင်ပါတယ်။ ကျနော်တို့ eg မယ်တော့ pseudo-classes အနည်းငယ်ကိုပဲ ဖော်ပြထားမှာ ဖြစ်ပါတယ်။ ကျနော်တို့ လေ့လာမယ့် pseudo-classes နှစ်ခုကိုတော့ link history pseudo-classes လို့ခေါ်ပါတယ်။ ဘာကြောင့်လဲဆိုရင်တော့ သူတို့ဟာ link တွေ့ပေါ်မှာ အခြေခံပြီတော့ အဲ့link တွေ့က ကြည့်ပီသားလား မကြည့်ရသေးတာလားဆိုတာကို style နဲ့ခွဲခြားမှာ ဖြစ်ပါတယ်။ Pseudo-classes ရဲ့ရေးပုံရေးနည်းကတော့ elementနောက်က colonလိုက်ပြီ link ဆိုပြီ သူ့ရဲ့နောက်ကတော့ ကျနော်တို့ css method ဖြစ်တဲ့ curly brace အဖွင့် နဲ့ အပိတ်လိုက်မှာ ဖြစ်ပါတယ်။ အောက်မှာ ဖော်ပြထားတဲ့ eg မယ်တော့ unvisted links ကို target လုပ်ဖို့ link pseudo-class မှာ color ကို orange ပေးထားပါတယ်။ ဒါပေမဲ့ anchor element မယ် href attribute မပါရင်တော့ link က အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။ ဒါကြောင့် မှတ်ထားရမှာက anchor element မယ် href attribute မပါဘဲ css style မယ် link pseudo-class မသုံးသင့်ပါဘူး။ ကျနော်တို့က အစောက link ကို orange ကိုပေးခဲ့တာမို့ browserကို refresh လုပ်တဲ့အခါ page ပေါ်မှာရှိတဲ့ link အားလုံးဟာ orange ရောင်ဖြစ်သွားပါလိမ့်မယ်။ link မှာ visited state ကိုရောက်ဖို့ဆိုရင် user က click မှ visited sytle ဖြစ်ဖို့ visited pseudo-class ကိုသုံးရမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် ကျနော်တို့ page ပေါ်မှာရှိတဲ့ links ကို click ရင် အပြာရောင်မြင်ရမှာ ဖြစ်ပါတယ်။ နောက်တစ်ခုက hover ဖြစ်ပါတယ်။ သူက ဘယ်လို့လဲဆိုရင် link ပေါ် mouse hover တင်လိုက်လို့ချင်ရင် :hover pseudo-class ကိုသုံးပေးရမှာ ဖြစ်ပါတယ်။ နောက်တစ်ခုက active pseudo class ဖြစ်ပါတယ်။ သူကကျဘယ်လို့လဲဆိုရင် link ကိုနှိပ်လိုက်ရင် တခြားlink တွေ့နဲ့မတူဘဲ ဒီlink က active ဖြစ်နေပါတယ်လို့ပြောချင်ရင် :active pseudo class ကို သုံးပေးရမှာ ဖြစ်ပါတယ်။ နောက်ဆုံးတစ်ခုက focus အကြောင်းကို ပြောမှာဖြစ်ပါတယ်။ သူကိုတော့ အဓိကလို့ပြောလို့ရပါတယ်။ user က mouse အစား keyboard နဲ့ပဲသုံးမယ်ဆိုရင် :focus pseudo-class ကိုသုံးပေးရမှာ ဖြစ်ပါတယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lake Tahoe</title>
<!-- adding external style -->
<link rel="stylesheet" href="css/descendant_selector.css">
<style>
a:link{
color: orange;
}
a:visited{
color: lightblue;
}
a:hover{
color: forestgreen;
}
a:active{
color: lightcoral;
}
:focus{
color: white;
background-color: orange;
}
</style>
</head>
<body>
<header id="top" class="main-header">
<span class="title">Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<div class="primary-content t-border">
<p>
Lake Tahoe is one of the most breathtaking attractions located in California.
It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions.
Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
<h2>Check out all wildlife</h2>
<p>
As spawning season appproaches the fish acquire a humpback and protuberant jaw.
After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>
, <a href="#" class="#">bears</a>, and <a href="#">Bald eagles</a>.
</p>
<a href="#" class="callout">See the Wildlife.</a>
</div>
<div class="secondary-content t-border">
<h3>From Tents to Resorts</h3>
<p>
Lake Tahoe is full of wonderful places to stay.You have the ability to sleep
in the outdoors in a tent, or relax like a king at a five star resort.Here are our top
three resorts:
</p>
<ul>
<li><a href="#">Lake Tahoe Resort Hotel</a></li>
<li><a href="#">South Lake Tahoe Resorts</a></li>
<li><a href="#">Tahoe Ski Resort Lodging</a></li>
</ul>
<h3>Pack Accordingly</h3>
<p>One of most important things when it comes to traveling through the great outdoors is packing accordingly.Here are a few tips:
outdoors is packing accordingly.Here are a few tips:
</p>
<ol>
<li>Bring Layers of clothing</li>
<li>Pack sunscreen</li>
<li>Carry extra water just in case</li>
<li>Pack light</li>
</ol>
</div>
<footer class="main-footer t-border">
<p>All right reserved to the state of <a href="#">California</a>.</p>
<a href="#top">Back to Top »</a>
</footer>
</body>
</html>
Output Here
CSS comments
HTML လိုပဲ ကျနော်တို့က CSS မှာ comments တွေ့ရေးနိုင်ပြီ ရှင်းပြထားတဲ့ notes တွေ့ (သို့) style sheet ရဲ့အပိုင်းတွေ့ကနေမှ browser ကို prevent လုပ်ပေးအတွက် အသုံးပြုပါတယ်။ CSS မှာရှိတဲ့ comments တွေ့က အစမှာ forward slash နဲ့ asterisk ဖြစ်ပြီ အဆုံးမယ်တော့ asterisk နဲ့ forward slash တို့ဆုံးပါတယ်။ အဲ့ဒီ အဖွင့်ပိတ်နှစ်ခုကြားမယ် ကြိုက်တဲ့စာသား ရေးနိုင်ပါတယ်။ အဲ့ရေးခဲ့တဲ့ comment စာသားတွေ့ကိုတော့ browser က လျစ်လျူထားမှာဖြစ်ပါတယ်။ CSS comments တွေ့က ကျနော်တို့ code ရေးထားနဲ့ ပက်သတ်တဲ့ hints တွေ့၊ အသုံးဝင်မဲ့ noteျ တွေ့ရေးထားရင်တော့ အသုံးဝင်ပါတယ်။ ကျနော်တို့က CSS comments တွေ့ရေးမယ်ဆိုရင် အစနဲ့ အဆုံး slash တို့ကို သတိထားရမှာ ဖြစ်ပါတယ်။ တကယ်လို့အဆုံးမေ့သွားမယ်ဆိုရင် comment စထားတဲ့အောက်က စပြီ css style အားလုံးကို comments အဖြစ်သတ်မှတ်သွားမှာ ဖြစ်ပါတယ်။ ကျနော်တို့က အဲ့လို့မျိုးတွေ မမေ့အောင်လို့ texteditor အများစုမှာ shortcut key တွေ့ Mac အတွက်ဆို cmd + /(slash), window အတွက်ဆို Ctrl + /(slash) သုံးပေးရမှာ ဖြစ်ပါတယ်။ Comments ကို ဖြုတ်ချင်တာဖြစ် တက်ချင်တာဖြစ်ဖြစ် အဲ့ shortcut key ကိုသုံးနိုင်ပါတယ်။
/* body */
body{
color: #878787;
margin: 0;
}
/* end body */
/* header */
.main-header{
background-color: orange;
}
h1{
font-size: 90px;
color: white;
}
.title{
color: white;
font-size: 26px;
}
/* end header */
/* under header section */
ul li{
background-color: tomato;
color: white;
margin-bottom: 5px;
}
h2{
font-size: 53px;
}
h3{
font-size: 20px;
color: #48525c;
}
p{
color: white;
background-color: lightblue;
}
.primary-content{
text-align: center;
}
/* footer */
.main-footer{
padding: 60px 0;
border-bottom: solid 10px orange;
}
/* end footer */
/* section border */
.t-border{
border-top: 2px solid lightgray;
}
Output Here
Understanding units and values
CSSရဲ့ property တိုင်းမှာ လက်ခံနိုင်တဲ့ values တွေရှိပါတယ်။ ဥပမာ - color: blue; ။ Value က number, length, image (သို့) URL စတာတွေကို ဖော်ပြနိုင်ပါတယ်။ အဲ့တာတွေအကုန်လုံးက categorized ခွဲထားတဲ့ data types လို့ခေါ်ပါတယ်။ ကျနော်တို့က CSS data types တိုင်းကို မှတ်မိနေစရာမလိုပါဘူး။ ကျနော်တို့ လိုအပ်နေတဲ့ အကောင်းဆုံး reference ကတော့ CSS properties တွေ valuesတွေ များကြီးလက်ခံနိုင်တဲ့ reference ကို လိုအပ်နေတာဖြစ်ပါတယ်။ CSS data types တွေကို ထောက်ပံ့ပေးနေတဲ့ အကြီးမားဆုံး reference ကတော့ Mozila Developer Network docs ဖြစ်ပါတယ်။ ကျနော်တို့ အဲ့docs မှာ CSS data types lists အားလုံးကို လေ့လာနိုင်ပါတယ်။ MDN docs မှာ color vlaue data type link ကိုနှိပ်ပီပီဆိုရင် color value တွေကို သတ်မှတ်ဖို့ မတူညီတဲ့ နည်းလမ်းတွေကိုတွေ့မြင်နိုင်မှာ ဖြစ်ပါတယ်။ အဲ့ color values တွေက background color properties, color properties, border colors, shadows တို့ဖြစ်ပါတယ်။ တစ်ချို့data types တွေကတော့ integers , numbers and percentages တို့ဖြစ်ကျပါတယ်။ ကျနော်တို့က number အတွက် positive (သို့) negative integer သုံးနိုင်ပြီ ၊ (သို့) percentage values တွေကိုလည်း သုံးနိုင်ပါတယ်။ အများအားဖြင့်တော့ ကျနော်တို့က integer နဲ့ number values တွေကို length unit နဲ့သုံးပါတယ်။ length unit ဟာ length data type ရဲ့ အစိတ်ပိုင်းဖြစ်ပါတယ်။ ကျနော်တို့က unit ကို pixels (သို့) ems (သို့) rems တို့နဲ့ number value အတွက် သုံးနိုင်ပါတယ်။ ဥပမာ- font-size: 90px; ဆိုလို့ရှိရင် 90 က datatype ဖြစ်ပြီ pixel က length ဖြစ်ပါတယ်။ ပြီးတော့ မှတ်ထားရမှာက length unit နဲ့ number ကြား ဘယ်တော့မှ space မခြားရပါဘူး ။ ဒါမှမဟုတ်ရင် မှားပါတယ်။ ယခု background image ကို သတ်မှတ်ဖို့အတွက် uri data type ကိုသုံးပြီ image ပြသဖို့ရန် URL (သို့) path တွေထည့်ပေးရမှာ ဖြစ်ပါတယ်။ အခုတော့ CSS data types တွေနဲ့ ပိုပြီးတော့ ရင်းနှီးလာပါပြီ ။ ကျနော်တို့ သိချင်တဲ့ CSS property တွေကို MDN မှာ ဆက်ပြီးလေ့လာနိုင်ပါတယ်။
Length units & Pixels
number value ကိုသတ်မှတ်တဲ့အခါ ကျနော်တို့က value တွေအတွက် တိုင်တာဖို့ unit (သို့) length တွေလိုအပ်ပါတယ်။ အဲ့လိုမှမဟုတ်ဘူးဆိုရင် browser က number valueတွေကို မသိပါဘူး။ ဒါကြောင့် CSS length တွေဖော်ပြဖို့အတွက် အမျိုးမျိုးသော unitsတွေပေးရပါတယ်။ တချို့သော length units တွေက တစ်ခြားဟာတွေထက် ပိုပြီသင့်တော်ပါတယ်။ ဥပမာ- relative units နဲ့ percentage unitsတို့က တစ်ခြားသော length values တွေနဲ့ ဆက်စပ်နေပါတယ်။ အဲ့တာက developer တွေအတွက် screen size နဲ့ resolution တို့ကို layout ချရတာ ပိုလွယ်ကူစေတာဖြစ်ပါတယ်။ တစ်ဆက်တည်းမှာပဲ pixels ကဲ့သို့သော absolute units က တစ်ခြားရာတွေနဲ့ဆက်စပ်ပြီတော့ အမြဲတမ်း fixed ဖြစ်နေတာဖြစ်ပါတယ်။ absolute units က relative units လောက် scale မကျပါဘူး ။ ကျနော်တို့ခု length values ကို လေ့လာရမှာ ဖြစ်ပါတယ်။ သူတိ့ုမှာ ကျနော်တို့သုံးနိုင်တဲ့ မတူညီတဲ့ unit types တွေများစွာရှိပါတယ် ။ အဲ့တာတွေကတော့ relative length units နဲ့ absolute units တို့ပဲ ဖြစ်ပါတယ်။ ပထမabsolute units ကိုလေ့လာသွားမှာ ဖြစ်ပါတယ်။ CSS မှာ absolute ၆ ခုရှိပါတယ်၊ ဒါပေမဲ့ အသုံးများတဲ့တစ်ခုကတော့ pixel unit ပဲဖြစ်ပါတယ်။ သူက ကျနော်တို့နဲ့လည်း familiar ဖြစ်ပါတယ်။ Pixel တွေကိုသုံးတဲ့အခါ ကျနော်တို့သတ်မှတ်ထားတဲ့အတိုင်း browser မှာ ထွက်လာမှာ ဖြစ်ပါတယ်။ ကျနော်တို့ အောက်မှာ ဖော်ပြထားတဲ့ ဥပမာမယ်တော့ header ကို 960pixels ပေးထားတာဖြစ်ပါတယ်။ ယနေ့ခေတ်မှာတော့ CSS မှာရှိတဲ့ pixel unit ကတော့ physical screen pixels တွေမရှိပါဘူး ။ CSS pixel က အမှန်တကယ်တော့ abstract reference unit ဖြစ်ပါတယ်။ Device (သို့) hardware pixels အပေါ်အခြေခံနေမယ့်အစား viewing device ရဲ့ pixel density နဲံ CSS pixels တွေ့က ပြသနေတာဖြစ်ပါတယ်။ ဥပမာ - ကျနော်တို့က element တစ်ခုကို width height တစ်ခုဆီကို 200pixels ပေးခဲ့ပါတယ်။ ကျနော်တို့ ပေးခဲ့တဲ့ screen size မယ်တော့ ပုံမှန်ပေါ်ပြီး တစ်ခြားသေးသွားတဲ့ screen မှာဆိုရင် width height size က နှစ်ဆဖြစ်နေမှာ ဖြစ်ပါတယ် ။ ကျနော်တို့ မြင်ချင်တာကတော့ standard display (သို့) hight density display တို့နဲ့ မြင်ချင်တာဖြစ်ပါတယ်။ အထူးသဖြင့် အသစ်display s မှာဆို high pixel densities နဲ့ သေးငယ်တဲ့ elment ကို မမြင်ချင်တာပဲ ဖြစ်ပါတယ် ။ ဒါကြောင့် device တစ်ခုရဲံ pixel density က typical display ထက် ပိုမြင်နေလျှင် displayက pixel values ကို ချိန်ညှီရမှာ ဖြစ်ပါတယ်။ pixel units က မတူညီတဲ့ devices တွေပေါ်ဖြတ်ပြီ ညီအောင် လုပ်ဆောင်ပေးနိုင်ပါတယ်။ ဒီနည်းလမ်းက pixel units တွေက အားလုံးviewing အခြေနေမှာ pixel density က ပြသနာမရှိဘဲ တူညီနေတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။
/* footer */
.main-footer{
padding: 60px 0;
border-bottom: solid 10px orange;
}
/* end footer */
Output Here
Percentage Units
number values တွေကို သတ်မှတ်တဲ့အခါ percentage units နဲ့ သတ်မှတ်နိုင်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ percentages က browser ရဲ့ length အလိုက်သတ်မှတ်ပေးလို့ ဖြစ်ပါတယ်။ ကျနော်တို့က percentage တွေကို CSS မှာ သုံးတဲ့အခါ percentage valueက parent element ရဲ့ length ကို တိုင်းတာနိုင်ပါတယ်။ ဒါကြောင့် parent element ပေါ်အခြေခံပြီ ညှီနိုင်ပါတယ်။ Width, margin, padding တို့ကဲ့သို့သော များပြားလှတဲ့ properties တွေက သူတို့ရဲ့ container fluid size elements တွေအတွက် percentages တွေကိုသုံးနိုင်ပါတယ် ။ ဥပမာ - အောက်မှာကျနော်တို့ဖော်ပြထားတဲ့ ဥပမာမယ်ဆိုရင် header element width ကို 50% နဲ့ဖော်ပြပေးထားတာ ဖြစ်ပါတယ်။ အာ့ဆိုရင် ကျနော်တို့ ရေးထားတဲ့ header မှာ browser ရဲ့တစ်ဝက်ပဲ ပေါ်မှာ ဖြစ်ပါတယ်။ browser ကို resize လုပ်ကြည့်လိုချင်ရင်လည်း size အလိုက် တစ်ဝက်ပဲ ပြသပေးမှာ ဖြစ်ပါတယ်။ နော်ထပ် margin-left ကို 10% ထားရင်လည်း browser ရဲ့ size အလိုက် 10% ယူပြီ လိုက်ပေါ်ပေးမှာပဲ ဖြစ်ပါတယ်။ ဒါပေမဲ့ အခု ကျနော်တို့ header width ကို 100% နဲ့ margin-left ကို 0 နဲ့ပဲသွားမှာ ဖြစ်ပါတယ်။ ဒါပေမဲ့ နောက်တစ်ဆင့်က layout ကိုသွားမှာ ဖြစ်ပါတယ်။ element နှစ်ခုလုံးကို target ထားချင်ရင်တော့ rule တစ်ခုရှိပါတယ်။ အဲ့rule က group multiple selectors ကိုသုံးရမှာ ဖြစ်ပါတယ်။ သုံးပုံသုံးနည်းကတော့ select လုပ်ထားတဲ့ element နှစ်ခုကြားမယ် comma ခံထားပေးရမှာ ဖြစ်ပါတယ်။
header{
width: 50%;
margin-left: 10%;
}
.primary-content, .secondary-content{
width: 60%;
}
Output Here
Realtive length Unit
CSS မှာ relative length unitsတွေက တစ်ခြားသော length valuesတွေနဲ့ ဆက်နွယ်နေတာဖြစ်ပါတယ်။ relative unit အသုံးများဆုံးကတော့ em unit ဖြစ်ပါတယ်။ em ကို font relative unit လို့ခေါ်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ parent elements font sizeပေါ်အခြေခံပြီ တွက်ချက်ပေးလို့ ဖြစ်ပါတယ်။ element property မှာ မည်သည့်အချိန်မဆို 1 em ပေးနိုင်ပြီ 1em ဆိုတာက parent element ရဲ့ font size နဲ့ညီပါတယ်။ ဒါကြောင့် ဥပမာ အနေနဲ့ပြောရင် browser အများစုမှာ default font size က 16px ဖြစ်ပါတယ်။ ဒါကြောင့် ကျနော်တို့ရဲ့ ဥပမာထဲမယ် body font size ကို 1em ထားခဲ့ရင် default font size က 16px ဖြစ်မှာဖြစ်ပါတယ်။ 2em ဆိုရင် 32 px ဖြစ်ပါတယ်၊ စသည့်ဖြင့်။ em ကိုပြောင်းတဲ့အခါမှာ element ရဲ့ pixel value ကို parent element font size pixel valueနဲ့ စားပေးရမှာ ဖြစ်ပါတယ်။ ဥပမာထဲမယ် h1 font size ကို pixel ကနေ em ပြောင်းပြပေးထားတာဖြစ်ပါတယ်။ ဒါကြောင့် em က scalable content တည်ဆောက်ခြင်းအတွက် အသုံးဝင်းတဲ့ unit ဖြစ်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ parent elementsပေါ်အခြေခံပြီ child elements font size တွေကို ချိန်ညှိပေးနိုင်ပါတယ်။ ခုအရေးကြီးတာကတော့ em units နဲ့ font size သုံးတဲ့အခါ nested elements တွေမှာ compounding effect တွေဖြစ်ပေါ်လာပါတယ်။ အောက်မှာ ပြထားတဲ့ ဥပမာ မယ် main header ကို font size 2 em ပေးလိုက်လိုရှိရင် child element font size တွေပါကြီးလာမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် ကျနော်တို့ relative em units ကို သုံးတဲ့အခါ သတိထားသုံးရမှာ ဖြစ်ပါတယ်။ ကျနော်တို့ style sheet မှာ font sizes တွေဘယ်လောက်ထိ သတ်မှတ်ပြီပြီဆိုတာ compounding effect မှာ ပေါ်လာပါလိမ့်မယ်။
/* body */
body{
color: #878787;
margin: 0;
}
/* end body */
/* header */
.main-header{
background-color: orange;
font-size: 2em; /* this font affected to nested elements like h1, .title */
}
h1{
font-size: 5.625em; /* 90px/ 16px = 5.625em */
color: white;
}
.title{
color: white;
font-size: 1.625em; /* 26px / 16px = 1.625em */
}
/* end header */
Output Here
REM units
CSS မှာ REM unit လို့ခေါ်တဲ့ တစ်ခြားသော relative unit ရှိပါတယ်။ REM ဆိုတာက root-M ဖြစ်ပြီ em unit နဲ့ ဆင်တူပါတယ်။ မတူညီတာကတော့ em လို parent element တွေနဲ့ ဆက်စပ်မှုမရှိပါဘူး။ ကျနော်တို့အောက်မှာပြထားတဲ့ ဥပမာမှာ h1 title element ကို em ကနေ rem ပြောင်းလိုက်လိုရှိရင် ပြောင်းလဲသွားမှာတွေ့ရမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် ကျနော်တို့က ဘယ်တစ်ခုကို သုံးသင့်တာလဲ။ pixels တွေက ပိုပြီတိကျတယ်၊ နားလည်ရလွယ်ကူတယ်၊ ကြိုတင်ခန့်မှန်နိုင်တယ်။ဒါပေမဲ့ အခြေခံ typographic design တည်ဆောက်လို့ရှိရင် (သို့) design က scale ကျဖို့ လိုအပ်လို့ရှိရင် မတူညီတဲ့ devicesတွေ၊ screen sizes တွေကို ဖြတ်ပြီလုပ်ဆောင်ပေးရမှာ ဖြစ်ပါတယ်။ percentages၊ ems (သို့) REMs pixels ထက် ပိုကောင်းတယ်လို့ recommend ပေးချင်ပါတယ်။
h1{
font-size: 5.625em; /* 90px/ 16px using rem unit */
color: white;
}
.title{
color: white;
font-size: 1.625em; /* 26px / 16px using rem unit */
}
Output Here
Color Values
Web design မှာ color တွေကစားတာက အရေးကြီးတဲ့ အပိုင်းမှာ ပါဝင်ပါတယ်။ CSS နဲ့ မတူညီတဲ့ နည်းလမ်းတွေနဲ့ color vlaue တွေကို ဖော်ပြနိုင်ပါတယ်။ Color values တွေကိုဖော်ပြတဲ့ ရေးဘူးရ နည်းလမ်းသုံးခုကတော့ keyword, hexadecimal value (သို့) RGB function တို့ဖြစ်ပါတယ်။ CSS data types အများစုက element တွေဘယ်လိုပေါ်လာဖို့ စကားလုံးပုံစံတွေကို ယူပြီတော့ keyword နဲ့ ကြိုတင်သတ်မှတ်နိုင်ပါတယ်။ color ကို ကိုယ်စားပြုဖို့ များပြားလှတဲ့ ကြိုတင်သတ်မှတ်ထားတဲ့ keyword css တွေထဲက တစ်ခုအဖြစ် color value ကို ဖော်ပြတာဖြစ်ပါတယ်။ ဥပမာ - orange ၊ lightblue ၊ forestgreen ၊ lightcoral ။ အချို့သော color names တွေက ရိုးရှင်းတယ်။ ဥပမာ - black, silver, grey , and white တို့ဖြစ်ပါတယ်။ တစ်ချို့သော colors names တွေက စကားလုံးတွေပေါင်းစပ်ထားတာ ဖြစ်ပါတယ်။ ဥပမာ cadet-blue, cornflower-blue ။ green-yellow, blonde-green colors တွေတောင်မှ color keywords တွေရနိုင်လား မရနိုင်လား ကျနော်တို့ရဲ့ guide line ဖြစ်တဲ့ MDN Docs မှာ ကြည့်နိုင်ပါတယ်။ color ကို ဖော်ပြဖို့ တစ်ခြားသော နည်းလမ်းက RGB model နဲ့ ဖော်ပြမှာ ဖြစ်ပါတယ်။ RGB ဆိုတဲ့ အရှည်ခေါက်က red, green , blue ဖြစ်ပါတယ်။ နည်းလမ်းတွေထဲက နောက်ထပ်တစ်ခုကတော့ hexadecimal notation နဲ့ ဖြစ်ပါတယ်။ hexadecimal notation က hex value ကို ရည်ညွှန်တာ ဖြစ်ပါတယ်။ hex vlaue ဆိုတာက red, green and blue color တန်ဖို့းတွေကို ပေါင်းစပ်ထားတာဖြစ်ပါတယ်။ hex value သုံးပုံသုံးနည်းကတော့ value အစမှာ hash sign(#) နဲ့စပြီ သူနော်ကမှ hexadecimal charactersတွေလိုက်တာ ဖြစ်ပါတယ်။ Hexadecimal characters တွေက numbers မယ်ဆို 0- 9 အထိရှိပြီ letters မှာဆိုရင် a-f အထိပဲ ရှိတာဖြစ်ပါတယ်။ Hexadecimal character က သုံးလုံး (သို့) ခြောက်လုံး သုံးပြီး ရေးနိုင်ပါတယ်။ ဥပမာ - #ff0033 ၊ ff က red value ကိုကိုယ်စားပြုတာဖြစ်ပြီ 00 က grren value ကို ကိုယ်စားပြုတာဖြစ်ပါတယ်၊ 33 က blue value ကို ကိုယ်စားပြုပါတယ်။ ကျနော်တို့ရဲ့ ခု editor အများစုမှာ color value ကိုhover လုပ်ချင်အားဖြင့် preview ကြည့်နိုင်မှာ ဖြစ်ပါတယ်။ fff သုံးလုံးက အဖြူရောင်ဖြစ်တယ်ဆိုတာကို editors တွေဖြစ်တဲ့ Illutstrator (သို) Phtotoshop တွေမှာ coor code ထည့်ပြီလေ့လာနိုင်ပါတယ်။ hexadecimal value combiantionတစ်ခုချင်ဆီလေ့လာချင်တယ်ဆိုရင်လည်း MDN Docs မှာလေ့လာနိုင်ပါတယ်။ နောက်တစ်ခုက rgb values တွေဖြစ်ပါတယ်။ သူတို့ကလည်း red,green ,blue ဖြစ်ကျပါတယ်။ သူ့value ကန့်သတ်ချက်တွေကတော့ 0-255 အထိ ရှိတာဖြစ်ပါတယ်။ အများဆုံး 255 က အဖြူရောင်ကို ကိုယ်စားပြုတာဖြစ်ပြီ အနည်းဆုံးဖြစ်တဲ့ သုံးညကကျ အမည်းရောင်ကို ကိုယ်စားပြုတာဖြစ်ပါတယ်။ ဥပမာ- အနီရောင်ကို ကိုယ်စားပြုချင်ရင်တော့ rgb(255,169,73) ဆိုပြီ ဖြစ်ပါတယ်။ နောက်ဆုံးမှာတော့ alpha channel color ရဲ့ opacity ကိုsetting ချဖို့အတွက် rgb color model ကို extend လုပ်ထားတာဖြစ်ပါတယ်။ ဥပမာ link ပေါ် hover လုပ်ရင် orangeရဲ့ transparent shade လေးဖြစ်ပေါ်လာစေတာမျိုး ဖြစ်ပါတယ်။ hover rule မှာ color value ပါလုပ်မယ်ဆိုရင် rgb အစား rgba function ကို သုံးရမှာ ဖြစ်ပါတယ်။ alpha value ကိုသုံးမယ်ဆိုရင် element ရဲ့နောက်မှာရှိတဲ့ background layer ကို သတိထားရမှာ ဖြစ်ပါတယ်။ rgba ရဲ့နော်ဆုံးမှာပါတဲ့ value က alpha value ဖြစ်ပါတယ်။ alpha value တန်ဖိုးကတော့ 0-1 အထိပဲ ဖြစ်ပါတယ်။ rgba function သုံးမယ်ဆိုရင် alpha value ကို သတိထားသုံးပေးရမှာ ဖြစ်ပါတယ်။
h1{
font-size: 5.625rem; /* rem unit used */
color: #fff; /* three value same to six value for hexadecimal vlaue */
}
h3{
color: #48525c;
}
/* pseudo class */
a:link{
color: rgb(255,163,73);
}
a:visited{
color: rgba(255,169,73,0.4);
}
/* main header */
.main-header{
background-color: #ffa949;
Output Here
Text Styles and Font Styles
Text တွေက web page ပေါ်ကျနော်တို့ကြည့်တဲ့အခါ သိသားထင်ရှားစွာ မြင်ရမှာ ဖြစ်ပါတယ်။ ပြီတော့ text styles တွေ သတ်မှတ်ဖို့အတွက် CSS မှာ properties တွေများကြီးရှိပါတယ်။ အဲ့ဒီထဲက အများကြီးက keyword values တွေကို သုံးကျပါတယ်။ text-align property က text ရဲ့ horizontal alignment တွေကို ထိန်းချုပ်တာဖြစ်ပါတယ်။ အောက်မှာပြထားတဲ့ ဥပမာမယ်တော့ main-header ရဲ့ div ကို text-align ကို center ပေးရုံနဲ့ အလယ်ခေါင်ရောက်သွားမှာ ဖြစ်ပါတယ်။ text-align မှာ property value သုံးခုရှိပါတယ်။ အဲ့တာတွေကတော့ left,right, center တို့ဖြစ်ကျပါတယ်။ နောက်တစ်ခုက text ရဲ့ case တွေကို ပြောင်နိုင်ဖို့ text-transform ကိုသုံးနိုင်ပါတယ်။ သူရဲ့ property valuesတွေကတော့ uppercase, lowercase, or cpaitalized တို့ဖြစ်ပါတယ် ။ အောက်မှာ ပြထားတဲ့ ဥပမာ မှာ ပါတဲ့ linkအောက်မှရှိတဲ့ underline ကို ဖြုတ်ချင်ရင် text-decoration property ကို သုံးပြီ none ဆိုတဲ့ vlaue ကိုသုံးနိုင်ပါတယ်။ h2 အောက်မှာ underline ကိုထည့်ပေးမယ်ဆိုရင် text-decoration property မှာ underline ဆိုတဲ့ value ကို သုံးပေးရမှာ ဖြစ်ပါတယ်။ နောက်ဆုံးမှာတော့ text style ဖြစ်တဲ့ font-weight ကို ထည့်မှာဖြစ်ပါတယ်။ characters တွေ ပါးချင်တာဖြစ်ဖြစ် ထူးချင်တာဖြစ်ဖြစ် font-weight property မှာ normal နဲ့ bold တို့ကို သုံးပေးရမှာဖြစ်ပါတယ်။ headings တွေအားလုံးက default setting က bold ဖြစ်ပါတယ်။ ဒါကြောင့် ကျနော်တို့က font-weight မှာ normal ပေးချင်အားဖြင့် browser မှာ ဘာပြောင်လဲသွားမလဲဆိုတာ တွေ့မြင်နိုင်ပါတယ်။ font-weight မှာ normal နဲ့ bold တို့အပြင် lighter နဲ့ bolder ဆိုပြီ values တွေရှိပါသေးတယ်။ သူတို့က သူတို့ရဲ့ inherited font weight ပေါ်အခြေခံပြီတော့ text element ရဲ့ font-weight ကို lightens (သို့) darkens လုပ်နိုင်ပါတယ်။ အဲ့တာတွေအပြင် font-weight မှာ numbers တွေဖြစ်တဲ့ 100-900 အထိလည်း သတ်မှတ်ပြီ ချိန်ညှိနိုင်ပါသေးတယ်။ font-weight value 100 က အပါးဆုံးဖြစ်ပြီ 900 ကတော့ အထူးဆုံးဖြစ်ပါတယ်။text property ကဲ့သို့သော text ရဲ့ သွင်းပြင် တွေကိုလည်း change နိုင်ပါတယ်။ ဥပမာ - font-family, font-szie, font style တွေစသည့်ဖြင့် ရှိကျပါတယ်။ ပထမနေနဲ့ ကျနော်တို့ text အတွက် (သို့) typeface ကို သတ်မှတ်ဖို့ font-family property ကို သုံးနိုင်ပါတယ်။ တိကျတဲ့ font-family name ကတော့ Verdana, Arial , (သို့) Helvetica တို့ဖြစ်ကျပြီ၊ ရေဘူးရ name တွေကတော့ serif , sans serif (သို့) monospace တို့ဖြစ်ကျပါတယ်။ ဒါြကောင့် browserရဲ့ default serif font ကို ကြည့်နိုင်ပါတယ်။ ဒါကြောင့် ကျနော်တို့ ဥပမာရဲ့ body element ကို san-serif ပေးခဲ့တာဖြစ်ပါတယ်။ ကျနော်တို့က ရေဘူးရ CSS font names တွေအားလုံးကို သိချင်ရင် MDN Docs မှာ ရှာပီကြည့်နိုင်ပါတယ်။ အရေးကြီးတဲ့အချက်ကတော့ ကျနော်တို့ပြချင်တဲ့ font ကို ရွေးပြီ ကျနော်တို့ရဲ့ computer ထဲမယ် installed လုပ်ထားရမှာ ဖြစ်ပါတယ်။ ဒါပေမဲ့ computersအားလုံးမယ်တော့ fonts အားလုံးမရနိင်ပါဘူး။ ယခု systems အားလုံးမှာ ရနိုင်တဲ့ font ကို web-safe fonts လို့ခေါ်ပါတယ် ။ ဒါကြောင့် web-safe fonts ကို ပြန်သတ်မှတ်ဖို့ လိုပါလိမ့်မယ် အဲ့လို့ ဖန်တီးတာကို font stack လို့ခေါ်ပါတယ်။ CSS font stacks တွေက fonts lists ကို ဦးစားပေးပြီတော့ browser က user system ပေါ်မှာ installed လုပ်ထားတဲ့ font ကို ရှာပါတယ်။ font-family ပြီတဲ့နောက်မှာတော့ fonts lists မှာ font stack ထပ်ထည့်နိုင်ပါတယ်။ ကျနော်တို့က browser မှာ installed မလုပ်ထားဘူးဆိုရင်လည်း browser က အလိုအလျောက် ကြိုစားပြီ install လုပ်သွားမှာ ဖြစ်ပါတယ်။ နောက်ဆုံးမှာတော့ generic font name တွေထပ်ထည့်နိုင်ပါတယ်။ font name က စကားလုံးတစ်လုံးထက်ပိုနေရင် quotes ထဲမယ် ထည့်ရေးရမှာ ဖြစ်ပါတယ်။ Web-safe fonts အတွက် font stack generator ဖြစ်တဲ့ cssfontstack.com မှာ ထပ်ပြီလေ့လာနိုင်ပါတယ်။ နောက်လာမယ့် သင်ခန်စာမယ်တော့ web fonts တွေကို import လုပ်ခြင်းအားဖြင့် won font ဘယ်လို့ဖန်တီးမလဲဆိုတာ လေ့လာရမှာ ဖြစ်ပါတယ်။
/* body */
body{
color: #878787;
margin: 0;
font-family: 'Helvetica Neue',Helvetica,Arial,san-serif; /* font style */
}
/* end body */
/* header */
.main-header{
background-color: #ffa949;
font-size: 2em; /* this font affected to nested elements like h1, .title */
text-align: center; /* text align style */
}
h1{
font-size: 5.625rem; /* 90px/ 16px = 5.625em */
color: #fff; /* three value same to six value for hexadecimal vlaue */
font-weight: normal; /* font style */
}
.title{
color: #fff;
font-size: 1.625rem; /* 26px / 16px = 1.625em */
font-weight: normal;
}
/* end header */
h2{
font-size: 53px;
text-decoration: underline;
font-weight: normal; /* font weight normal for h2 */
}
h3{
font-size: 20px;
color: #48525c;
}
p{
color: white;
background-color: lightblue;
}
.primary-content{
text-align: center;
}
/* footer */
.main-footer{
padding: 60px 0;
border-bottom: solid 10px orange;
}
/* end footer */
/* section border */
.t-border{
border-top: 2px solid lightgray;
}
/* Pseudo Class */
a:link{
color: rgb(255,163,73);
text-decoration: none; /* text decoration style */
}
a:visited{
color: rgba(255,169,73,0.4);
}
a:hover{
color: forestgreen;
}
a:active{
color: lightcoral;
}
:focus{
color: white;
background-color: orange;
}
Output Here
Line height & Font Property
Line height က text lines တွေကြား vertical spacing တွေဘယ်လိုသတ်မှတ်လဲဆိုတာနေရာမယ် သုံးမှာ ဖြစ်ပါတယ်။ Page တစ်ခုမှာ text lines တွေများကြီးရှိတယ်ဆိုရင် users တွေအတွက် ဖတ်ရတာ အဆင်မပြေတာ (သို့) ခက်ခဲတာမျိုးဖြစ်တက်ပါတယ်။ ဒါကြောင့် line spacing တွေရဲ့ amount ကိုပိုပြီဖတ်လို့အဆင်ပြေအောင် CSS line height property နဲ့ ကူညီပေးပါတယ်။ CSS Line height property က text line တွေကြား vertical spacing တွေကို တိုးတာ (သို့) လျှော့တာ လုပ်ဆောင်နိုင်ပါတယ်။ Line height property value တွေကို လက်ခံနိုင်ပါတယ်။ သူရဲ့ default value က normal ဖြစ်ပါတယ်။ သူက unit မပါတဲ့ valueတွေ၊ pixel တွေ၊ (သို့) percentage value တွေကိုပါ လက်ခံနိုင်တာဖြစ်ပါတယ်။ နောက်ထပ် relative unit တွေဖြစ်တဲ့ ems (သို့) rems တွေကိုပါ လက်ခံနိုင်ပါတယ်။ ဒါပေမဲ့ အကောင်းဆုံးကတော့ unit မပါတဲ့ line height value ကို သုံးတာပိုကောင်းပါတယ်။ ဒီနည်းလမ်းက line height တွေကို အမြဲတမ်းအချိုးကျပါတယ်၊ font size တွေကိုပါ scale ကျပါတယ်။ နောက်တစ်ခုကတော့ font အကြောင်းပြောပြမှာဖြစ်ပါတယ်။ font-weight, font-size , line-height , font-family လေးခုကို တစ်ကြောင်းတည်းဖြစ်အောင် font ဆိုပြီရေးနိုင်ပါတယ်။ ပထမဦးဆုံး value မယ်က font-weight vlaue ရေးရပြီ အဲ့နောက် မှာ space တစ်ချက်ခြားပြီ font-size တန်ဖိုးရေးရမှာဖြစ်ပြီ၊ သူ့နောက်က ကပ်ရက်မယ် forward salash အဲ့နောက်က ကပ်ရက်တစ်ခုက line-height တစ်ခုဖြစ်ပြီ နောက်ဆုံးမယ်မှ space တစ်ချက်ခြားပြီး font-family တန်ဖိုးတွေကို ထည့်ရမှာ ဖြစ်ပါတယ်။
/* body */
body{
color: #878787;
margin: 0;
/* font-family: 'Helvetica Neue',Helvetica,Arial,san-serif; font style */
/* font-weight: normal;
font-size: 1em;
line-height: 1.3; */
font: normal 1em/1.3 'Helvetica Neue',Helvetica,Arial,san-serif;
}
Output Here
Box Model
Box model က CSS layout ရဲ့ အခြေခံဖြစ်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ ဘယ်လို့ elements တွေကို ဘယ်လိုပြမယ် တစ်ခြားအရာတွေနဲ့ ဘယ်လို့ဆက်နွယ်နေတာကို ဆုံးဖြတ်ပေးလို့ဖြစ်ပါတယ်။ page တခုချင်ဆီမယ် ရှိတဲ့ element တိုင်းကို rectangular box အဖြစ် တွေးထားပါ။ box တခုချင်ဆီမယ် တိကျတဲ့ dimensions ရှိပြီ တိကျတဲ့ space တွေကို ယူပါတယ်။ ခုတော့ box space ယူတာဟာ content ပေါ်အခြေခံပြီတော့ padding တွေ၊ border တွေ၊ margin တွေ ယူတာဖြစ်ပါတယ်။ ဒါကြောင့် box model ဆိုတာက page ပေါ်မယ်ရှိတဲ့ element တစ်ခုချင်ဆီရဲ့ space တွေကို ဖော်ပြတာဖြစ်ပါတယ်။ CSS က အလွန်အခြေခံ design ဖြစ်ပြီ box model concept ကို နားလည်ထားရပါမယ်။ elements ကိုပြသဖို့အတွက် နည်းလမ်းနှစ်ခု ရှိတာကို သိထားဖို့လိုပါတယ်။ ဒါကြောင့် element တိုင်းမယ် display value ရှိပါတယ်။ elements အများစုမှာ block (သို့) inine ဖြစ်ပါတယ်။ ခု block element form က သီးသန့် block ဖြစ်ပြီး သူက parent element ရဲ့ width ပေါ်အခြေခံပြီ width အပြည့်ယူတာ ဖြစ်ပါတယ်။ ဥပမာ - block elemts တွေကတော့ divs, paragraph, heading tag, list items တွေဖြစ်ကျပါတယ်။ block element တွေက entire line ကိုယူပါတယ်။ inline element က သူတို့လိုအပ်သလို width ကိုပဲ ယူတာပဲ ဖြစ်ပါတယ်။ inline element တွေက အောက်တကြောင်းမဆင်းဘဲ content အတွင်းမှာပဲနေတာဖြစ်ပါတယ်။ တစ်ချို့သော inline element တွေကတော့ spa tags, images, anchor elements တွေပဲဖြစ်ပါတယ်။ box ရဲ့ အတွင်းကျဆုံး area နဲ့ core component တွေ့က content area ဖြစ်ပြီ အဲ့ဒီ area ထဲမယ်မှ အမှန်တကယ် content တွေကတော့ text (သို့) image တွေပဲ ဖြစ်ပါတယ်။ content ara ကိုဝန်ရံထားတာကတော့ padding area ဖြစ်ပြီ ၊ padding area ကို ဝန်ရံထားတာက border area ဖြစ်ပါတယ်။ border area ကို ဝန်ရံထားတာက margin ဖြစ်ပြီ၊ အပြင်ဆုံးဝန်ရံထားတက box ဖြစ်ပါတယ်။ ဒါကြောင့် အရေးကြီးဆုံးအရာက box ရဲ့အပြင်ဘက်မှာ margin area space ဖန်တီးနေစဉ်မှာ box အတွင်းမှာ padding space area ကို ဖန်တီးမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် padding, borders, margins တွေ့က CSS box model ရဲ့ အရေးကြီးတဲ့ components တွေဖြစ်ပါတယ်။
Output Here
Padding, Border & Margin
Element တစ်ခုရဲ့ content area ကို padding ကနေ ဘယ်လို့သက်ရောက်လည်းဆိုတာကို လေ့လာသွားမှာ ဖြစ်ပါတယ်။ padding မှာ လေးမျိုးရှိပါတယ်။ အဲ့တာတွေကတော့ padding-top, padding-right, padding-botttom, padding-left တို့ဖြစ်ပါတယ်။ သူတို့လေးခုလုံးကို ခြုံပီး padding တစ်ခုတည်းနဲ့ ရေးနိုင်ပါတယ်။ padding မှာ value တစ်ခုတည်းနဲ့ ရေါ်မယ်ဆိုရင် လေးခုလုံးကို value က သက်ရောက်မှာ ဖြစ်ပါတယ်။ padding မှာ value နှစ်ခုနဲ့ရေးမယ်ဆိုရင် ပထမ တန်ဖိုးက top, bottom ဖြစ်ပြီ ဒုတိယ တန်ဖိုးက left, right ဖြစ်ပါတယ်။ နောက်တစ်နည်းက သုံးခုနဲ့ ရေးမယ်ဆိုရင် ပထမတန်ဖိုးက top only ဖြစ်ပြီ ဒုတိယ တန်ဖိုးက left, right ဖြစ်ပြီ တတိယ တန်ဖိုးက bottom ဖြစ်ပါတယ်။ padding value တန်ဖိုးတွေကို pixels အစား percentage တွေနဲ့လည်း သုံးနိုင်ပါတယ်။ခုတစ်ခါကတော့ content area ကို border style လုပ်တာကို လေ့လာမှာ ဖြစ်ပါတယ် ။ ပထမတော့ border-width property ဆိုပီရှိပါတယ်။ border-width property ရဲ့ vlaue ကို unit အနေနဲ့ pixel (သို့)em(သို့) rem(သို့) သုံးနိုင်ပါတယ်။ percentage ကိုတော့ သုံးခွင့်ပေးမထားပါဘူး။ နောက်တစ်ခုက border-style property ဖြစ်ပါတယ်။ border style မယ်တော့ property တွေများစွာရှိပါတယ်။ အဲ့ထဲကနေမှ ကျနော်တို့ အသုံးများတာကတော့ solid , dashed, dotted တို့ဖြစ်ပါတယ်။ ကျနော်တို့ border ခတ်ထားတဲ့ကောင်ကိုမှ color ပေးချင်ရင် border-color ဆိုပြီ ပေးနိုင်ပါတယ်။ border color ကိုတော့ keyword color (သို့) hexidecimal (သို့) RGBA value တွေသုံးနိုင်ပါတယ်။ ဥပမာ- #ffa949 ။ border-width မယ်လည်း ကျနော်တို့က တစ်ခုချင်ဆီပေးနိင်ပါတယ်။ အထက်က ဖော်ပြထားတဲ့ ဥပမာ လိုပါပဲ သူ့မှာလည်း top, right , bottom , left ပါရှိပါတယ်။ ကျနော်တို့ စိတ်ကြိုက် borde-width ကို ချနိုင်ပါတယ်။ နောက် border-style ကော border-color ကော စိတ်ကြိုက် border-width ကဲ့သို့သော လုပ်နိုင်ပါတယ်။ ဒါပေမဲ့ ကျနော်တို့က အဲ့သုံးခုလုံးကို အတူတူဆိုရင်တော့ အဲ့လို သုံးကြောင်းရေးမနေတော့ဘဲ border ဆိုပီ တစ်ကြောင်းတည်းနဲ့ ရေးနိုင်ပါတယ်။ border ရဲ့ရေးပုံနည်းကတော့ ပထမ တန်ဖိုးက border-width ဖြစ်ပြီ သူ့နောက်က space တစ်ချက်ခြားပီ border-style လိုက်ပီ အဲ့နောက်မှာမှ border-color vlaue လိုက်မှာ ဖြစ်ပါတယ်။ ဥပမာ- border: 10px solid #434a52 ။ border တစ်ကြောင်းတည်းရေးပီတော့လည်း ကိုယ့်သတ်မှတ်ချင်တဲ့ width,style,color တို့ကို override လုပ်နိုင်ပါတယ်။အပေါ်က ဆွေးနွေးခဲ့သလို့ပဲ box တစ်ခုရဲ့ side တစ်ခုချင်ဆီကို margin သတ်မှတ်သွားမှာ ဖြစ်ပါတယ်။ Padding property ကဲ့သို့သော margin property က percentage values (သို့) length values တွေကို လက်ခံနိုင်ပါတယ်။ ယခုတော့ padding property လိုမျိုး clockwise ပုံစံအကြောင်းကို သိထားရပါမယ်။ အတိုးခေါက်နေနဲ့ top-right, bottom-left တို့ဖြစ်ပါတယ်။ သူရဲ့ value ကတော့ padding သဘောမျိုးပါပဲ ။ affecting လေးပဲ ကွာသွားတာဖြစ်ပါတယ်။ ဘယ်လို့ကွဲသွားတာလဲဆိုရင် padding က content area ရဲ့ အတွင်းက တွန်းပေးတာဖြစ်ပြီ margin က content area ရဲ့အပြင်ဘက်ကနေ တွန်းပေးတာ ဖြစ်ပါတယ်။ အောက်မှာဖော်ပြထားတဲ့ ဥပမာမယ် primary နဲ့ secondary content တွေကို margin auto ပေးခြင်းအားဖြင့် side တစ်ခုချင်ဆီကို margin တစ်ခုဆီတိုးသွားတာကို အော်က ဥပမာမယ် လေ့လာနိုင်ပါတယ်။
/* Layout Styels */
.primary-content, .secondary-content{
width: 60%;
margin: auto;
}
.wildlife{
color: white;
background-color: #434a52;
padding: 18% 24%;
/**** Border style ****/
/* border-color: #ffa949;
border-width: 10px;
border-style: dashed; */
/* instead of border three lines */
border: 1rem dashed #ffa949;
/* border left color override and u can override top,left,right,bottom */
border-left-color: greenyellow;
border-right-color: aquamarine;
margin: 105px 0 60px;
}
Output Here
Display
Display property က layout တွေထိန်းချုပ်ဖို့အတွက် CSS ရဲ့အရေးကြီးတဲ့ properties တွေထဲက တစ်ခုဖြစ်ပါတယ်။ Display property နဲ့ element တစ်ခုရဲ့ default setting display ကို override လုပ်နိုင်ပါတယ်။ ယခု display vlaues များကြီးထဲက လေးခုကို ပြောပြမှာ ဖြစ်ပါတယ်။ အဲ့တာတွေကတော့ none, block, inline ,and inline-block တို့ဖြစ်ပါတယ်။ ဥပမာ - div element ရဲ့ display default setting ဖြစ်တဲ့ block ကိုလည်း inline ပြောင်းချင်ရင်လည်းပြောင်နိုင်ပါတယ်။ block-level element အတွက် default display တွေကတော့ divs, paragraphs, and headings အားလုံးပဲဖြစ်ပါတယ်။ block element တွေက သူတို့ရဲ့ parent element မှ width က အပြည့်နေရာယူတာ ဖြစ်ပါတယ်။ အောက်မှာ ဖော်ပြထားတဲ့ ဥပမာ မယ်ကျနော်တို့ displayed inline ရှိတဲ့ anchor element ကို display block လုပ်ပြထားတာ ဖြစ်ပါတယ်။ အဲ့တာကြောင့် anchor tag တွေက width အပြည့်ယူသွားတာ ဖြစ်ပါတယ်။ နောက်ထပ် list items တွေကို display inline ပေးကြည့်မယ်ဆိုရင် list item တွေက တစ်ြကောင်းထဲမှာ တစ်ခုနဲ့ တစ်ခု ကပ်ရက်ပေါ်နေမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် အနည်းငယ်ပိုင်းခြားချင်ရင် ကျနော်တို့က padding left-rig့ht, border left-right တွေပေးနိုင်ပါတယ်။ ကျနော်တို့ အဲ့လိုတွေ margin တွေပေးထားသော်လည်း browser မယ် change မသွားမပါဘူး။ ဘာလို့လဲဆိုတော့ margin တွေ အလုပ်လုပ်မလုပ်ပါဘူး အဲ့တာကြောင့် ကျနော်တို့က inline-block ကို သုံးပေးရပါတယ်။ ယခု တော့ inline-block က block elemnt ကဲ့သို့သော box ကို generate ထုတ်နိုင်တာဖြစ်ပါတယ်။ ဒါပေမဲ့ inline element သုံးရင် သူ့ရဲ့ flow လေးတွေကို လိုက်နာရမှာ ဖြစ်ပါတယ်။ inline element နဲ့ block-level display modes တို့ပေါင်းစပ်ပီ အလုပ်လုပ်ပါတယ်။ ဒါကြောင့်inline-block ကိုသုံးမှ ကျနော်တို့ အစောက လုပ်ခဲ့တဲ့ margin တွေလုပ်မှာ ဖြစ်ပါတယ်။
.callout{
font-size: 1.25em;
border-bottom: 3px solid;
padding: 0 9px 3px;
margin-top: 20px;
display: inline-block;
}
li {
display: inline; /* check inline or without inline-block */
padding: 0 12px;
border-right: solid 1px;
margin: 80px 0;
}
.wildlife a{
display: block;
background: greenyellow;
}
Output Here
Basic Layout
Basic Layout တည်ဆောက်ဖို့ box modelအကြောင်းကိုကျနော်တို့ လေ့လာခဲ့ပြီး ဖြစ်ပါတယ်။ element ရဲ့ wide (သို့) tall အဖြစ် width နဲ့ height တို့ကို box model ကို ချုပ်ကိုင်ထားတာဖြစ်ပါတယ်။ width နဲ့ height properties ကို သုံးပြီတော့ ကျနော်တို့ရဲ့ ကိုယ်ပိုင် dimensions တွေကို ထည့်နိုင်ပါတယ် ။ ခု width နဲ့height properties တို့က length units တွေဖြစ်တဲ့ pixels တွေ့၊ ems (သို့) percentages အဖြစ် length units တွေ့ကို လက်ခံနိုင်ပါတယ်။ ပြီးခဲ့တဲ့ သင်ခန်းစာတော့က ကျနော်တို့က width အတွက် percentage value တွေကိုသုံးတာကို လေ့လာခဲ့ပြီး ဖြစ်ပါတယ်။ Padding width values တွေ၊ border width values တွေကိုအစားထိုးဖို့ အကောင်းဆုံးနည်းလမ်းကတော့ element တစ်ခုရဲ့ total size ကိုအကျယ်ချဲ့နိင်တဲ့ CSS feature အသစ်ဖြစ်တဲ့ box-sizing ဖြစ်ပါတယ်။ Box-sizing property က total width တွေ height တွေတွက်ချက်ပေးနိုင်ပါတယ်။ Border box value က element ရဲ့ widthတွေ၊ height တွေ ၊ paddding တွေကို expand လုပ်မယ့်အစား forces လုပ်ထားပါတယ်။ ယခုကျနော်တို့က universal selector နဲ့ style sheet ထဲမယ် box-sizing ကို ကြေငြာထားတာက ကောင်းတဲ့အရာတစ်ခုဖြစ်ပါတယ်။ ဒါပေမဲ့ box-sizing တွေကို ထပ်ခါထပ်ခါ သုံးတာက မကောင်းမွန်ပါဘူး။ HTML element တစ်ခုမှာ margin area ကလွဲပြီတော့ တစ်ခြားအရာတွေက background layer ကို ထည့်သွင်းစဉ်းစားကျပါတယ်။ element တိုင်းမှာ background layer ဖြစ်တဲ့ default transparent ပါရှိပါတယ်။ ကျနော်တို့က background layer အတွက် color (သို့) image တွေထည့်နိုင်ပါတယ်။ ကျနော်တို့ background image property ကိုထည့်တဲ့အခါမှာ background image value ထဲမယ် url value ကိုသတ်မှတ်ရမှာ ဖြစ်ပါတယ်။ url function က image ကိုရှာတဲ့နေရာမယ် သုံးတာဖြစ်ပါတယ်။ url function ထဲမယ်မှ single quote (သို့) double quote အသုံးပြုပြီတော့ image ပတ်လမ်းကြောင်းကို ရေးပေးရမှာ ဖြစ်ပါတယ်။ ကျနော်တို့က ပုံပတ်လမ်းကြောင်းကို ခေါ်တဲ့နေရာမယ် css file ကနေခေါ်တာဖြစ်တဲ့အတွက် css folder အောက်မှာရှိပြီ css folder ထဲကပြန်ထွက်ပြီမှ image foler ထဲကိုဝင်ရမှာ ဖြစ်ပါတယ်။ တခါfile ကနေ folder နဲ့တန်တူထွက်ချင်ရင် dot dot forward-salash(../) ကိုသုံးနိုင်ပါတယ်။ အဲ့လို့ဆိုရင် background image ကပေါ်လာပြီ image တွေထပ်နေတကို တွေ့ရမှာ ဖြစ်ပါတယ်။ အဲ့တာက ဘာလို့လဲဆိုရင် background-repeat property ရဲ့ default value ဖြစ်တဲ့ repeat ကြောင့်ပဲ ဖြစ်ပါတယ်။ ကျနော်တို့က repeat value ကိုမလိုချင်တဲ့တွက်ကြောင့်မို့ ကျနော်တို့ css ထဲမယ် value ကို no-repeat ပေးပြီ override လုပ်နိုင်ပါတယ်။
/* body */
*{
box-sizing: border-box;
}
/* header */
.main-header{
font-size: 2em; /* this font affected to nested elements like h1, .title */
text-align: center; /* text align style */
height: 850px;
padding-top: 170px;
/* background-color: #ffa949;
background-image: url('../images/mountain.jpg');
background-size: cover; /* background-image to make scale */
background-repeat: no-repeat;
background-position: center; */
background: #ffa949 url('../images/mountain.jpg') no-repeat center;
/* instead of background-color, background-image,background-repeat,background-position */
background-size: cover;
Output Here
Float & ClearFix
page တစ်ခုပေါ်မှာ ရှိတဲ့elements တွေကို layouts တွေတည်ဆောက်ဖို့ ဘယ်လို့position နဲ့ထားမှာ သိဖို့အတွက် box model components နားလည်ထားရမှာ အရေးကြီးပါတယ်။ ဒါကြောင့်ခု ကျနော်တို့ float postion ရဲ့အချို့ကိုလေ့လာသွားမှာ ဖြစ်ပါတယ်။ ယခု foatsတွေက CSS နဲ့ page layout ချဖို့အတွက် အသုံးများတဲ့ methods တွေထဲကတစ်ခုဖြစ်ပါတယ်။ element တစ်ခုက floated element ဖြစ်တဲ့အခါမှာ page ရဲ့ normal flow ကိုယူပါတယ်။ပြီတော့ element ရဲ့ container ကို ဘယ်ဘက်(သို့) ညာဘက် မှာ နေရာချထားပေးတာဖြစ်ပါတယ်။ အာ့ကြောင့် ကျနော်တို့ အောက်မှာပြထားတဲ့ ဥပမာကတော့ div နှစ်ခုကို column အနေနဲ့ပြပေးထားတာဖြစ်ပါတယ်။ float property ကိုသုံးပြီတော့ div နှစ်ခုကို row တစ်ခုထဲမယ် side by side ထားနိုင်ပါတယ်။ ပထမ div ကို float:left; ပေးပြီတော့ ဒုတိယတစ်ခုကို float:right; ပေးရမှာ ဖြစ်ပါတယ် ။ အဲ့လို့ပေးရင် side by side ပေါ်ပြီ တစ်ခြား element ပေါ်သွားပေါ်နေမှာ ဖြစ်ပါတယ်။ အဲ့တာ ဘာကြောင့်လဲဆိုရင် ကျနော်တို့ float လုပ်ထားတဲ့ element တွေကို space ရှင်းခဲ့ဖို့ လိုပါတယ်။ overflow property က value မှာ hidden (သို့) auto ပေးခြင်းအားဖြင့် space တွေကို ရှင်းနိုင်တာဖြစ်ပါတယ်။ အဲ့တာက floats တွေကို ရှင်းလင်းတဲ့ ရိုးရှင်းတဲ့နည်းလမ်းဖြစ်ပါတယ်။ ဒါပေမဲ့ ကျနော်တို့က ပိုမိုကောင်းမွန်တဲ့ နည်းလမ်းကို သုံးဖို့လိုအပ်ပါတယ်။ အဲ့နည်းလမ်းကတော့ floats တွေကို clear လုပ်နိုင်တဲ့အကောင်းဆုံးဖြစ်တဲ့ clearfix ဖြစ်ပါတယ်။ အဲ့နည်းလမ်းကို အသုံးပြုတဲ့အခါမှာ key parts နှစ်ခုကို သိထားဖို့ လိုပါတယ်။ ပါဝင်တဲ့ element ကို လိုအပ်သလိုရှင်းနိုင်ပြီ အဲ့element ကို class ပေးဖို့ လိုအပ်ပါတယ်။ class ရှိပြီသား element တွေမှာ နောက်ထပ်class ပေးချင်ရင် အရင်ရှိပြီသား class value နောက်မှာပဲ space တစ်ချက်ခြားပြီ ရေးနိုင်ပါတယ်။ clearfix ကိုသုံးမယ်ဆိုရင် proptery မှာ clear သုံးပြီ value မှာတော့ both ကိုသုံးရမှာ ဖြစ်ပါတယ်။ float ပေးထားတဲ့ div နှစ်ခုကို left right change ပြီ သုံးနိုင်ပါတယ်။
/* Float Layout */
.resorts, .tips{
width: 46.5%;
}
.resorts{
float: left;
}
.tips{
float: right;
}
/* Clear Fix */
.group:after{
content: '';
display: table;
clear: both;
}
Output Here
Order Lists & Unorder Lists
Ordered Lists နဲ့ un-ordered lists တိုကို ထိန်ချုပ်ဖို့ အမျိုးအမျိုးသော list properties တွေကိုသုံးနိုင်ပါတယ် ။ Un-ordered list ရဲ့ default က bullet (သို့) solid dot တွေနဲ့ ဖော်ပြပေးတာဖြစ်ပါတယ်။ Order lists ကတော့ default အနေနဲ့ number တွေနဲ့ ဖော်ပြပေးတာဖြစ်ပါတယ်။ ဒါပေမဲ့ ကျနော်တို့က list style property ကို သုံးပြီတော့ ကျနော်တို့က list markers တွေကို change နိုင်ပါတယ်။ ဒါြကောင့် ကျနော်တို့က list type marker တွေကို ordered (သို့) un-ordered lists မှာပါ ထပ်ထည့်နိုင်တာဖြစ်ပါတယ်။ ကျနော်တို့က list-style-type: square; လို့ပေးခဲ့လိုချင်ရင် browser list က square marker လေးနဲ့မြင်ရမှာ ဖြစ်ပါတယ်။ list style type property က disk, circle (သို့) square စတဲ့value တွေကို လက်ခံနိုင်ပါတယ်။ အသေးစိတ် value တွေကို လေ့လာချင်ရင်တော့ MDN Docs မှာ အကုန်လေ့လာနိုင်ပါတယ်။ နောက်ထပ် ကျနော်တို့က list style တွေကို border property ကိုသုံးပြီတော့လည်း border ထဲထည့်နိုင်ပါတယ်။ ကျနော်တို့က အဲ့လို border ထဲထည့်လိုချင်ရင် list style marker တွေက အပြင်မှာ ကျန်ခဲ့မှာ ဖြစ်ပါတယ်။ အဲ့လိုအချိန်ကျရင် ကျနော်တို့က orderlists (သို့) un-ordered lists တို့မှာ list style postion property ကိုသုံးပြီ value မှာ inside ကိုသုံးပေးရမှာဖြစ်ပါတယ်။ နောက်ပီ ကျနော်တို့က orderlists (သို့) un-ordered lists တိုရဲ့ default padding တွေကိုလည်းပြောင်းလဲနိုင်ပါတယ်။
/* list style types of ordered lists and un-ordered lists */
ul,ol{
list-style-position: inside;
padding-left: 0;
}
li{
/* list-style-type: square; */
border: 2px solid #000;
}
Output Here
Text Shadow
ခုတစ်ခါမှာတော့ CSS တွေရဲ့ latest feature များကြီးကို လေ့လာမှာဖြစ်ပါတယ်။ ကျနော်တို့အစောက သင်ခန်းစာမယ်ပြောခဲ့တဲ့ CSS features တွေက photoshop ကဲ့သို့သော graphics editor သုံးတဲ့ tool တွေနဲ့ တူတာဖြစ်ပါတယ်။ ဒါကြောင့် elements ရဲ့ shapeတွေ၊ shadows တွေ၊ box shadows တွေ၊ gradients တွေ ကို ပြောင်လဲနိုင်တာဖြစ်ပါတယ်။ ဒါကြောင့် CSS design တွေက browser မှာ ကောင်းမွန်တဲ့ design နဲ့ ဖန်တီးလာကျတာဖြစ်ပါတယ်။ အဲ့ဒီ features တွေကို ဥပမာ ထဲမယ် သုံးပြီ ပြသွားမှာ ဖြစ်ပါတယ်။ ပထမအနေနဲ့ text-shadow property ကို သုံးပြီ text တွေမှာ shadows တွေထည့်ပြသွားမှာ ဖြစ်ပါတယ်။ ဥပမာထဲမယ်တော့ main header ကို သုံးပြသွားမှာဖြစ်ပါတယ်။ text-shadow property က length unit သုံးခုနောက်က color value လိုက်တာဖြစ်ပါတယ်။ ဒါကြောင့် ပထမဦးဆုံး value က shadow ရဲ့ horizontal offset ကိုထည့်တာဖြစ်ပါတယ် (သို့) shadow ကို ဘယ်ဘက်ကနေ (သို့)ညာဘက်ကနေ ဘယ်လောက်ကွာဝေး ကျလာတာလည်း ပြောတဲ့နေရာမယ်သုံးတာဖြစ်ပါတယ်။ ဒုတိယ value ကတော့ shadow ရဲ့ vertical offset ကိုထည့်ပေးတဲ့နေရာမယ်သုံးတာဖြစ်ပါတယ်။ သူကကျတော့ အစော ပထမvalue နဲ့ ပြောင်ပြန် shadow ရဲ့ top နဲ့ bottom ဘယ်လောက်ကျလာသလဲပြောတဲ့နေရာမယ် သုံးတာဖြစ်ပါတယ်။ တတိယvalue ကတော့ text-shadow ကို ဘယ်လောက် blurထည့်တဲ့နေရာမယ်သုံးတာဖြစ်ပါတယ်၊(သို့) text-shadow ဆီကိုblur amount သုံးနိုင်လဲနေရာမယ် သုံးတာဖြစ်ပါတယ်။ ဒါကြောင့် ကျနော်တို့ ဥပမာမယ်တော့ text-shadow ကိုရှင်းလင်းမြင်သာအောင် blur radius ကို zero ပေးခဲ့တာဖြစ်ပါတယ်။ နောက်ဆုံးကတော့ color valueဖြစ်ပါတယ်။ သူကတော့ color value လိုပါပဲ၊ text-shadow color တွေကို keyword နဲ့လည်သုံးနိုင်သလို့ RGBA နဲ့လည် သုံးနိင်ပါတယ်။ မှတ်ထားရမှာက text-shadow color မထည့်ရင် default text color value ကို inherit လုပ်ပါလိမ့်မယ်။ တစ်ခြား 3D text shadow တွေကိုလည်း 3D Text Shadow Link မှာ copy ကူးပီသုံးနိုင်ပါတယ်။
h1{
font-size: 5.625rem; /* 90px/ 16px = 5.625em */
color: #fff; /* three value same to six value for hexadecimal vlaue */
font-weight: normal; /* font style */
text-shadow: -5px 8px 0 #222; /*text-shadow */
}
Output Here
Box-shadow
text-shadow property ကဲသို့သော box-shadow property ကိုလည်းသုံးနိင်ပါတယ်။ box-shadow property value တွေကလည်း text-shadow လိုပါပဲ။ Box shadow ရဲ့ ပထမ value က box-shadow ရဲ့ horizontal offset ကို ထည့်တာဖြစ်ပါတယ်။ positive value က ညာဘက်ကိုရွေ့တာဖြစ်ပြီ negative value က ဘယ်ဘက်ကိုရွေ့တာဖြစ်ပါတယ်။ ဒုတိယvalue က vertical offset ကိုထည့်ပေးတာဖြစ်ပါတယ်။ positive value က အောက်ကရွေ့ပြီ negative value က အပေါ်ကိုရွေ့တာဖြစ်ပါတယ်။ နောက်ထပ် box-shadow ကိုသတ်မှတ်မှာဖြစ်ပါတယ်။ text-shadow ကဲ့သို့သော box-shadow color ကိုမသတ်မှတ်ခဲ့ဘူးဆိုရင် color rule က elementရဲ့ color property အရ shadow ကို render လုပ်သွားမှာ ဖြစ်ပါတယ်။ တတိယ value အနေနဲ့ blur-radius ကိုလည်းထည့်နိုင်ပါတယ်။ text-shadows ကဲ့သို့သော box-shadows တွေက layout ပေါ်မှာ influence လုပ်ထားတာ မရှိပါဘူး။ ဒါကြောင့် ကျနော်တို့က shadow ကို tall ဖြစ်ချင်လား wide လိုချင်လား ကျနော်တို့ လိုချင်သလို့ ရနိုင်ပါတယ်။ ပြီတော့ သူရဲ့ဘေးပတ်လည်မှာ သတ်ရောက်မှုမရှိပါဘူး။ ဒါကြောင့် box-shadow ရဲ့ spread distance သတ်မှတ်ဖို့အတွက် optional box-shadow တစ်ခုထက်ပိုပြီ အသုံးဝင်လာတာ ဖြစ်ပါတယ်။ ဒါကြောင့် box-shadow property မှာ length value ကို spread value လို့ခေါ်တာဖြစ်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ element တစ်ခုကနေ shadow ကို move (သို့) spread လုပ်နိုင်လို့ ဖြစ်ပါတယ်။ ပြီတော့ သူက directions အားလုံးကို ညီတူညီမျှ လုပ်ဆောင်ပေးပါတယ်။ ဒါကြောင့် box-shadow ရဲ့ size ပေါ်မယ် ပိုပြီထိန်ချုပ်နိုင်အောင် ပေးထားတာဖြစ်ပါတယ်။ နောက်ဆုံးအနေနဲ့ default အားဖြင့် box-shadows က element တစ်ခုရဲ့ drop-shadows outside အဖြစ်ဖန်တီးပေးတာဖြစ်ပါတယ်။ ဒါပေမဲ့ ကျနော်တို့က inner-shadow ကို ဖန်တီးဖို့ဆိုရင် box-shadow ရဲ့ value ထဲမယ် inset keyword ကို ထည့်ပေးရမှာ ဖြစ်ပါတယ်။ inset value ကို box-shadow value ရဲ့ ပထမဆုံးဖြစ်ဖြစ် (သို့) နောက်ဆုံးမှာ ဖြစ်ဖြစ် ကြေငြာရမှာ ဖြစ်ပါတယ်။ အဲလိုမှ မဟုတ်ရင်တော့ အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။နောက်ထပ် ကျနော်တို့ content area ရဲ့ corner တွေကို border-radius property ကိုသုံးပြီ layout ကိုစိတ်ကြိုက်လုပ်နိုင်တာဖြစ်ပါတယ်။ သူမှာတော့ vlaue လေးမျိုးပါရှိပြီ clock right ပုံစံမျိုးဖြစ်ပါတယ်။ကျနော်တို့သိထားပြီဖြစ်တဲ့ top, right, bottom, left တို့ဖြစ်ပါတယ်။ သူ့vaue တွေရဲ့ units ကတော့ pixel အပြင် percentage ပါသုံးနိုင်ပါတယ်။
.wildlife{
color: white;
background-color: #434a52;
padding: 18% 24%;
/**** Border style ****/
/* border-color: #ffa949;
border-width: 10px;
border-style: dashed; */
/* instead of border three lines */
border-top: 1rem solid #ffa949;
/* border left color override and u can override top,left,right,bottom */
/* border-left-color: greenyellow;
border-right-color: aquamarine; */
margin: 60px 0 40px;
background: #434a52 url('../images/lion.jpg') no-repeat center;
background-size: cover;
box-shadow: inset 0 20px 20px 5px rgba(0,0,0,.8);
border-radius: 50px 10px 50px 10px; /* border-radius of content */
}
Output Here
Gradient
gradient တွေကိုလည်း ကျနော်တို့ CSS ထဲမယ် ထည့်သုံးနိုင်ပါတယ်။ သူကတော့ color နှစ်ခု (သို့) နှစ်ခုထက်ပိုတဲ့ ကြားမယ် progressive transition အဖြစ်တည်ရှိပါတယ်။ CSS gradient ဟာကိုယ်ပိုင် dimensions တော့မရှိပါဘူး။ ဆိုလိုတာက သူ့မှာ natural or prefered လုပ်တဲ့ sizes မရှိပါဘူး။ ဒါပေမဲ့ သူ့ရဲ့ concrete size နဲ့ element ရဲ့size နဲ့ နှိုယှဉ်တဲ့နေရာမယ် သုံးနိုင်ပါတယ်။ gradient ကို ကျနော်တို့က background-image တွေမှာ သုံးတာများပါတယ်။ gradient မှာ liner-gradient နဲ့ radial-gradient တို့အကြောင်းပဲ ပြောသွားမှာ ဖြစ်ပါတယ်။ liner-gradient က imaginary line တစ်လျှောက် color တွေကို generate ထုတ်ပေးတာဖြစ်ပါတယ် ။ နောက်ထပ်တစ်ခုကတော့ radial-gradient က center ကနေ color တွေကို progressively လုပ်ဆောင်ပေးတာဖြစ်ပါတယ်။ သူတို့ရဲ့ vlaue ရှေ့ဆုံးမှာဖြစ်ဖြစ် နောက်ဆုံးမှာ ဖြစ်ဖြစ် top,right,bottom,left တွေဆီ ရွေ့နိုင်တာဖြစ်ပါတယ်။ အောက်မှာ ဥပမာနှင့်တကွ လေ့လာနိုင်ပါတယ်။
.main-header{
font-size: 2em; /* this font affected to nested elements like h1, .title */
text-align: center; /* text align style */
height: 850px;
padding-top: 170px;
/* background-color: #ffa949;
background-image: url('../images/mountain.jpg');
background-size: cover; /* background-image to make scale
background-repeat: no-repeat;
background-position: center; */
/* background: #ffa949 url('../images/mountain.jpg') no-repeat center; */
/* instead of background-color, background-image,background-repeat,background-position */
background: radial-gradient(circle at top right, #ffa949, transparent 72%), /* using gradient color */
linear-gradient(0deg, #272323, transparent),
#ffa949 url('../images/mountain.jpg') no-repeat center;
background-size: cover;
}
Output Here
Web Font
ကျနော်တို့ ခုလေ့လာသွားမှာကတော့ web font ဖြစ်ပါတယ်။ အရင်သင်ခန်းစာမယ်တော့က ကျနော်တို့ရဲ့ computer ထဲမှာ font ကို install လုပ်ဖို့လိုအပ်တာဆိုပြောခဲ့တာ ဖြစ်ပါတယ်၊ အဲ့လို့မှမဟုတ်ရင် browser က မပြပေးပါဘူးလို့ သင်ယူခဲ့တာဖြစ်ပါတယ်။ ဒါကြောင့်computer ထဲကို install လုပ်မယ့််အစား web fonts တွေကို import လုပ်ခြင်းအားဖြင့် ကျနော်တို့ရဲ့ ကိုယ်ပိုင်font ပုံစံမျိုးလုပ်ဆောင်ပေးမှာ ဖြစ်ပါတယ်။ web fonts တွေက fonts တွေရဲ့ special types တွေဖြစ်ပြီ external soource ကနေ ကျနော်တို့ရဲ့ web pages တွေဆီကို linked ချိတ်ပေးပြီ လိုအပ်သလို သုံးနိုင်တာဖြစ်ပါတယ်။ ဒါကြောင့် web fonts တွေက userရဲ့ computer ပေါ်မယ် installed လုပ်ထားတဲ့ fonts အရေအတွက်တွေကို လိုအပ်သလောက်ပဲ မူတည်တာဖြစ်ပါတယ်။ Web fonts တွေကို CSS နဲ့ import လုပ်နိုင်တဲ့ အမျိုးမျိုးသော နည်းလမ်းတွေရှိပါတယ်။ ဒါကြောင့် @font-face rule method က web font ကိုcover လုပ်ထားပါတယ်။ ပထမ ကျနော်တို့ font file တွေကို fonts folder ထဲထည့်ထားပြီ ကျောနာ်တို့ရဲ့ css file ကနေ @font-face ထဲမယ် ခေါ်ပေးရမှာ ဖြစ်ပါတယ်။ fonts folder ထဲမယ် formats မတူတဲ့ သုံးခုကို မြင်ရမှာ ဖြစ်ပါတယ် ။ ဒါကြောင့် ကျနော်တို့က မတူညီတဲ့ file formats တွေကိုလိုအပ်ပါတယ်။ဘာကြောင့်လိုအပ်တာလဲဆိုရင် browser ရဲ့ support ကြောင့်ပဲ ဖြစ်ပါတယ်။ ကျနော်တို့ ဥပမာ ပြထားသလိုပဲ @font-face ထဲမယ်မှ font-family: 'Abolition Regular' ရေးပြီ အဲ့အောက်ကနေမှ src property ကိုသုံးပြီ value မှာမှ url function ထဲမယ် font path တွေကိုခေါ်ပီ link ချိတ်ပေးရမှာ ဖြစ်ပါတယ်။ အဲ့လို့မျိုး link ချိတ်ပေးပြီရင် ကျနော်တို့ သုံးမယ့် element ကို font-family: 'Abolition Regular' ဆိုပီ ရပါပြီ။
/* Font styles */
@font-face{
font-family: 'Abolition Regular';
src: url('../font/Abolition\ W00\ Regular.eot');
src: url('../font/Abolition\ W00\ Regular.eot?#iefix') format('embedded-opentype'),
url('../font/Abolition\ W00\ Regular.woff') format('woff'),
url('../font/Abolition\ W00\ Regular.ttf') format('truetype');
}
h1,h2{
font-family: 'Abolition Regular';
}
h1{
font-size: 5.625rem; /* 90px/ 16px = 5.625em */
color: #fff; /* three value same to six value for hexadecimal vlaue */
font-weight: normal; /* font style */
text-shadow: -5px 8px 0 #222; /*text-shadow */
margin: 12px 0 0;
}
.title{
color: #fff;
font-size: 1.625rem; /* 26px / 16px = 1.625em */
letter-spacing: 0.15em;
font-weight: 200;
border-bottom: 2px solid;
}
Output Here
Media Query
အခုအခါမှာတော့ အရေးကြီးတဲ့ responsibilities ထဲ့ကတစ်ခုဖြစ်တဲ့ web designers တွေ (သို့) front-end developers တွေက contenet တွေကို မတူညီတဲ့ devices တွေပေါ်မယ် ဘယ်လိုပါဝင်အောင်သတ်မှတ်မလဲ ဆိုတာဖြစ်ပါတယ်။ ကံအားလျော်စွာနဲ့ပဲ CSS media queries တွေက မတူညီတဲ့devices တွေကို target ထားပြီ resolutions တွေ၊ browser dimensions တွေ၊ စသည့်ဖြင့် ပေးပါတယ်။ ကျနော်တို့ရဲ့ content တွေကို wide range devices တွေပေါ်မယ် ဘာပြောင်းလဲမှုမှမရှိပါဘူး။ ဘာြကောင့်လဲဆိုတော့ အဲ့content အားလုံးကို CSS ထည့်မယ် ထိန်းချုပ်ထားလို့ ဖြစ်ပါတယ်။ media queries အချို့ကို သုံးပြီးတော့ multiple devices တွေနဲ့ viewport sizes တွေပေါ်မှာ websites ရဲ့ browsing experience တွေကို ပိုကောင်းအောင်လုပ်နိုင်ပါတယ်။ ဘာကြောင့်လဲဆိုတော့ ကျနော်တို့ရဲ့ contents တွေက device တွေဆီ respond (သို့) adapt ပြပေးလို့ ဖြစ်ပါတယ်။ ကျနော်တို့ pages တွေမယ် media queries တွေပါဝင်တဲ့ နည်းလမ်းအနည်းငယ်ရှိပါတယ်။ ဒါပေမဲ့ ကျနော်တို့ CSS မှာ media query rules တွေကို တိုက်ရိုက်ထည့်ပြီ အသုံးများတဲ့ method တွေကို သုံးနေကျတာဖြစ်ပါတယ် ။ media query ကို ဖန်တီးဖို့ဆိုရင် type @media နောက်က parentheses လိုက်ပြီ အဲ့နော်ကမှာ curly braces({}) တစ်စုံ လိုက်ပေးရမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် media rule က သူလိုချင်တဲ့ target ကို media type နဲ့ သတ်မှတ်နိုင်ပါတယ်။ ကျနော်တို့ဥပမှာမယ် media query ကို 960px ပေးခဲ့တာဖြစ်ပါတယ်။ အဲ့လို့ပေးခဲ့တဲ့အတွက် media query ထဲမယ် ပေးခဲ့တဲ့ viewport တွေက လုပ်မှာ ဖြစ်ပါတယ်။ media query ထဲမယ် ပုံမှန် CSS တွေ ရေးနိုင်ပါတယ်။ media query ထဲက css တွေက browser ကို resized လုပ်ကြည့်မှ css တွေအလုပ်လုပ်မလုပ် သိရမှာ ဖြစ်ပါတယ်။ media query နှစ်ခုကို တစ်ခုတည်းပေါင်းသုံးရင်လည်း သုံးနိုင်ပါတယ်။
Output Here
Cascade
CSS features တွေတော်တော်များများကို လေ့လာခဲ့ပြီဖြစ်ပါတယ်။ ဒါကြောင့် ကျနော်တို့က တစ်ချို့သော အရေးကြီးတဲ့ fundamental CSS concepts တွေကိုနားလည်ထားဖို့လိုပါတယ်။ ကျနော်တို့သိထားတဲ့ CSS က Cascading Style Sheets အတွက်ရပ်တည်နေတာဖြစ်ပါတယ်။ ပြီတော့ style sheets တွေက CSS ရေးဖို့ ကျနော်တို့သုံးတဲ့ documents တွေဖြစ်ပါတယ်။ ဒါပေမဲ့ Cascading က ဘာကိုဆိုလိုတာလဲဆိုရင် CSS လေ့လာခြင်းရဲ့ အရေးကြီးတဲ့အပိုင်းက CSS rules တွေကို ဘယ်လို့အသုံးချရမလဲဆိုတာကို နားလည်ထားဖို့လိုပါတယ်။ CSS မှာ Cascade က element တစ်ခုဆီကို ဘယ်styles ကို assign လုပ်ပါလို့ ဆုံးဖြတ်ပေးတာဖြစ်ပါတယ်။ Cascade မရှိလို့ရှိရင် CSS က Conflicting Style Sheets ဖြစ်သွားပါလိမ့်မယ်။ ဥပမာ- ကျနော်တို့ရဲ့ h1 element မှာ red ဆိုတာပြောခဲ့ရင် တစ်ခြားနေရာမယ်လည်း h1 element ကိုပဲ blue လိုပြောရင် အဲ့ style declarations နှစ်ခုက တစ်ခုနဲ့တစ်ခု ဆန့်ကျင်ဘက် ဖြစ်နေမှာ ဖြစ်ပါတယ်။ အဲ့လိုချိန်ကျရင် Cascade က နှစ်ခု(သို့) နှစ်ခုထက်ပိုတဲ့ declaration ကြား conflict ဖြစ်နေတာကို ရှင်းပေးနိုင်ပါတယ်။ CSS styles တွေက များပြားလှတဲ့ origins တွေကနေပြီတော့ အစဉ်လိုက် elements တွေကို cascade လုပ်နိုင်ပါတယ်။ element တစ်ခုဆီကို ဘယ်property ကို assign လုပ်ပါ ဆုံးဖြတ်ဖို့ Cascade ကလိုက်နာရပါတယ်။ အဲ့ဒီအတွက် အဆင့်သုံးဆင့် (သို့) style information တွေရဲ့ sources တွေရှိပါတယ်။ အဲ့ဒီ sourceတွေထဲက တစ်ခုကတော့ User Agent Style Sheet ဖြစ်ပြီ browser ကနေ default သတ်မှတ်ပေးထားတဲ့ CSS ပဲဖြစ်ပါတယ်။ အခြား source ကတော့ user တွေကနေ သတ်မှတ်ပေးတဲ့ styles တွေပါဝင်တဲ့ User Style Shet ဖြစ်ပါတယ်။ Users တွေက browser ရဲ့ default styles တွေကို ကြိုတင်သတ်မှတ်ပေးပြီ override လုပ်နိုင်ပါတယ်။ နောက်ထပ် တတိယတစ်ခုကတော့ Author Style Sheet ဖြစ်ပါတယ်။ သူကတော့ CSS တွေပါဝင်ပြီတော့ HTML page တွေဆီ CSS style တွေရေးနိုင်ပါတယ်။ Author Style Sheet မှာ ရှိတဲ့ CSS က User Agent နဲ့ User style sheets တို့ထက် ပိုအကေးကြီးပါတယ်။ အဲတာကြောင့် Cascade က source origin ပေါ်အခြေခံပြီ CSS propertyရဲ့ အရေးကြီးတာကိုး ဆုံးဖြတ်ပေးတာဖြစ်ပါတယ်။selector state တွေမှာ အထူးပြုထားတဲ့ selector တွေက အထူပြုမှုနည်းတဲ့ selector တွေရဲ့ style တွေအပေါ်မှာ overwrite ပြုလုပ်သွားပါတယ်။ဥပမာထဲမှာရေးပြထားတဲ့ color property ထဲမှာဘယ်ဟာကပိုပြီးတော့အသုံးပြုမှုကောင်းတဲ့ Property ဖြစ်မလဲဆိုတာကိုမရွေးချယ်နိုင်ပါဘူး။သုံးခုလုံးကတော့အရေးကြီးတာတွေအတူတူပဲဖြစ်ပြီးတော့ id selectors ကတော့ specificityပိုပြီး မြင့်မားပါတယ်။နောက်ထပ် example မှာပြထားသလို id selector ထဲမှာမှ property တူနေတယ်ဆိုရင် နောက်ဆုံးရေးထားတဲ့ property ကပဲ specificity ဖြစ်လို့အဲ့တာကိုပဲအလုပ်လုပ်ပါလိမ့်မယ်။နောက်ထပ်တစ်ခုကတော့ html တွေရဲ့အတွင်းထဲမှာပါလာတဲ့ Inline style တွေပဲဖြစ်ပါတယ်။ property တူတဲ့ inline style တွေပါတဲ့အခါမျိုးမှာဆိုရင် inline က id ထက်ပိုပြီး spicificity ဖြစ်တဲ့ အတွက်ကြောင့် inline style ပဲအလုပ်လုပ်မှာဖြစ်ပါလိမ့်မယ်။ external style sheet တွေကနှစ်ခုတွေဖြစ်နေမယ်ဆိုရင် နောက်ဆုံး style ကပဲအလုပ်လုပ်မှာဖြစ်ပါတယ်။ CSS cascade ရဲ့အဓိကရည်ရွယ်ချက်ကတော့ သူတို့ရဲ့ importance , specificity နဲ့ source order တွေအတိုင်းဆုံးဖြတ်ပြီးတဲ့နောက်မှာ style decleration တစ်ခုစီကို assiggn လုပ်ပေးဖို့ပဲဖြစ်ပါတယ် အချို့သော CSS properties တွေအသုံးပြုချင်းအတွက် inheritance တွေကိုသတိထားသင့်ပါတယ်။ CSS ထဲမှာ inheritance ဆိုတာကတော့ element တစ်ခုရဲ့ style value တွေဟာ သူ့ရဲ့ parent element ကနေကူးယူထားတာမျိုးပဲဖြစ်ပါတယ်။ element တွေမှာရှိတဲ့value တွေကသူ့တို့ရဲ့ parent element မှာရှိတာကို inheritance ပြုလုပ်ကြပါတယ်။ ကျနော်တို့က property မှာ initial valueကိုပေးလိုက်ရင် browser က Inheritance ကို ignores လုပ်သွားမှာပဲဖြစ်ပါတယ်။
<h1 class="heading" id="heading">Hello World!</h1>
CSS:
#heading {
color: orange;
}
.heading {
color: blue;
}
h1 {
color: green;
}