সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) CSS
CSS এ কমেন্ট লেখা
CSS এ কমেন্ট (যা মূলত: প্রগ্রামের অংশ নয়, প্রগ্রামারের সুবিধার জন্য ব্যবহৃত হয়) লিখতে হলে
/*…*/ এর মধ্যে লিখতে হয়। যেমন-
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
id সিলেক্টর
সুনির্দিষ্ট কোন ইলিমেন্টের স্টাইল প্রকাশের ক্ষেত্রে id সিলেক্টর ব্যবহৃত হয়। এ ক্ষেত্রে # দিয়ে তার পর id’র নাম লিখতে হয়। যেমন-
#para1
{
text-align:center;
color:red;
}
HTML কোড এ এভাবে প্রকাশ করা হয়:
<p id="para1">Hello World!</p>
class সিলেক্টর
একটি নিদিষ্ট গ্রুপের জন্য class সিলেক্টর ব্যবহৃত হয়। এ ক্ষেত্রে . দিয়ে তার পর class এর নাম লিখতে হয়।
CSSফাইলে তা এভাবে লিখতে হয়
p.center
{
text-align:center;
}
HTML কোড এ এভাবে প্রকাশ করা হয়:
<p>This paragraph will be center-aligned.</p>
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1>This heading will not be affected</h1>
<p>This paragraph will be center-aligned.</p>
</body>
</html>
সিএসএস তিনভাবে প্রকাশ করা যায়
১. বাইরের সিএসএস ফাইল কল করার মাধ্যমে
২. স্টাইল উল্লেখ করে তার ভেতরে কোড লিখে
৩. লাইনে লাইনে
১. বাইরের সিএসএস ফাইল কল করার মাধ্যমে
যে কোন নোট প্যাডে সিএসএস কোড লিখে তা .css ফরমেটে সেভ করতে হবে
মনে করি একটি সিএসএস ফাইল mystyle.css । mystyle.css ফাইলে নিচের কোড আছে
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
এই ফাইলটি কল করার জন্য নিচের html কোড লিখতে হবে।
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
যেখানে অনেকগুলো পাতার জন্য স্টাইল লিখতে হবে সেখানে বাইরের সিএসএস ফাইল কল করার মাধ্যমে কাজ করাই সুবিধাজনক
২. HTMLফইলে স্টাইল উল্লেখ করে তার ভেতরে কোড লিখে
একই পাতার জন্য স্টাইল ব্যবহার করার ক্ষেত্রে HTMLফইলেই CSS কোড লেখা যায়। <style type=”text/css”> … </style> এর মধ্যে CSS কোড লিখতে হয়। নিচের প্রোগ্রামটি দেখুন।
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
৩. লাইনে লাইনে সিএসএস কোড লিখে
নিচের মতোও লাইনে লাইনে সিএসএস কোড লিখে কাজ করার যায়। তবে এটাতে ভুল হওয়ার সম্ভাবনা আছে।
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
একাধিক বার কোন এলিমেন্টের স্টাইল উল্লেখ করলে দুই স্টাইল মিলিত ভাবে কাজ করে ।
