Create an External Style Sheet
External Style sheet ဆိုတာကေတာ့ CSS ေတြကို file တစ္ခုတည္းမွာ ထည့္သြင္းထားၿပီးေတာ့ HTML file ကေန တဆင့္ျပန္ေခၚသံုးတာပါ။ ဒါေၾကာင့္ website တစ္ခုထဲမွာ CSS ေတြ ထပ္ခါ ထပ္ခါေရးေနစရာမလိုေတာပါဘူး။ အခု ကၽြန္ေတာ္တို႕ CSS file တစ္ခု တည္ေဆာက္ရေအာင္။ အရင္ဆံုး index.html ကို folder တစ္ခုထဲမွာ ေဆာက္လိုက္ပါ။ ၿပီးရင္ index.html file သိမ္းထားတဲ့ ေနရာမွာပဲ style.css ဆိုၿပီး file တစ္ခု ဖန္တီးပါ။ .css ကို ဖန္တီးျခင္းဟာ .html ဖန္တီးတာနဲ႕ အတူတူပါပဲ။ file extension ကို .css ဟု ေျပာင္းေပးရံုသာ ရိွပါတယ္။ တကယ္လို႕ ေမ့သြားခဲ့ရင္ေတာ့ Chapter 1 မွာ ျပန္လည္ ဖတ္ရႈႏိုင္ပါတယ္။ ၿပီးရင္ .css ကို ဖြင့္လိုက္ပါ။ အဲဒီ အထဲမွာ ေအာက္ကလို ေရးလိုက္ပါ။
/* style.css */
h1 {
color:red;
font-family: Arial;
}
.myclass {
color:orange;
font-style: italic;
}
#myid {
color: blue;
font-size: 12px;
}/* style.css */ ဆိုတာကေတာ့ comment ပါ။ comment ေရးတဲ့ အခါမွာေတာ့ /* နဲ႕ စၿပီးေတာ့ / နဲ႕ ဆံုးပါတယ္။ comment ေပးထားတဲ့ အခါမွာ `/` နဲ႕ မဆံုးမျခင္း လိုင္းေၾကာင္း တစ္ေၾကာင္းထက္ ပို အသံုးျပဳလို႕ရပါတယ္။
ကၽြန္ေတာ္တို႕ index.html ကို ေအာက္ကလို ေရးရေအာင္။
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is header</h1>
<p class="myclass">Color green</p>
<p id="myid">Color blue</p>
</body>
</html>အဲဒီ code ေလးကို save လုပ္ၿပီး index.html ကို browser မွာ ၾကည့္လိုက္ပါ။ Figure 3-2 က အတိုင္း ျမင္ရပါလိမ့္မယ္။
အေပၚက code မွာ <link rel="stylesheet" type="text/css" href="style.css"> နဲ႕ CSS ကို ခ်ိတ္ဆက္ထားပါတယ္။ <link rel="stylesheet" type="text/css" ဆိုတာကေတာ့ CSS ကို အသံုးျပဳမယ္လို႕ ဆိုထားၿပီး href= ကေတာ့ ဘယ္ file ကို အသံုးျပဳမယ္လို႕ ေျပာထားပါတယ္။
ကၽြန္ေတာ္တို႕ ေနာက္ထပ္ file တစ္ခု ဖန္တီးရေအာင္။ index.html ေနရာမွာပဲ page2.html ဆိုၿပီး ဖန္တီးလိုက္ပါ။ အဲဒီ file ထဲမွာ ေအာက္ကလို ကၽြန္ေတာ္တုိ႕ေတြ ေရးထားလိုက္ပါမယ္။
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Page 2</h1>
<p class="myclass">My Class</p>
<p id="myid">My id</p>
</body>
</html>page2.html ကို browser မွာ ၾကည့္ရင္ ေအာက္ကလုိ ျမင္ရပါလိမ့္မယ္။
Figure 3-3
အရင္ index.html မွာ ေရးထားသလို myclass , myid စတာေတြကို ျပန္ျပီး အသံုးျပဳထားပါတယ္။ အဲဒီ class နဲ႕ id နဲ႕ ဆုိင္တဲ့ CSS ေတြကို style.css မွာ ေရးထားခဲ့ပါတယ္။ အဲဒီ css ကုိပဲ page2.html က အသံုးျပဳထားတယ္။ ဒါေၾကာင့္ index.html အတိုင္း style က အတူတူ ျဖစ္ေနတာကို ေတြ႕ႏိုင္ပါတယ္။