সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) CSS পাঠ-২

সিএসএস এর দ্বিতীয় ক্লাসে সবাইকে স্বাগতম। এ পর্বে সিএসএস কোডের id, ও class কিভাবে এইচটিএমএল এর সাথে কাজ করে তা দেখবো। আগের পর্ব যারা দেখেন নি তারা CSS এর প্রথম পর্ব দেখে নিন। তাছাড়া আলাদা CSS ফাইল আকারে কিভাবে প্রকাশ করা হয় এবং তা HTML এ প্রকাশ করার পদ্ধতিও দেখবো।

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>

একাধিক বার কোন এলিমেন্টের স্টাইল উল্লেখ করলে দুই স্টাইল মিলিত ভাবে কাজ করে ।

HTML এর উপর অসিম যে টিউটরিয়াল লিখেছেন তাতে সবাই অংশগ্রহন ছাড়া (বা HTMLজ্ঞান ছাড়া) এই টিউটরিয়াল বুঝতে পারবেন না। তাই এক পলকে দেখে নেই সেই টিউটরিয়ালগুলো।
HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)
HTMLপর্ব- দুই: রঙের ব্যবহার
HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার
HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১
HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২
HTML পর্ব-৬ HTML এ Font ট্যাগের ব্যবহার