এইচটিএমএল ডকুমেন্টের বিভিন্ন এলিমেন্টকে নির্দিষ্ট ভাবে স্টাইলিং করার জন্য সিএসএস এর class আত্ত্রিবুতে ব্যবহার করা হয়।
ওয়েব পেজের নির্দিষ্ট কতগুলো এইচটিএমএল এলিমেন্টের স্টাইল প্রকাশ করার জন্য class সিলেক্টর ব্যবহার করা হয়। সাধারনভাবে class আত্ত্রিবুতে ব্যবহার করার নিয়মটি হল প্রথমে ডট বা " . " চিহ্ন দিয়ে পরে ক্লাসের নাম লিখতে হবে এবং তারপরে তৃতীয় বন্ধনীর মধ্যে স্টাইলের জন্য সিএসএস কোড লিখতে হয়।
নিচে একটি উদাহরণ দেখুন, যেখানে paragraph নামক একটি ক্লাস যুক্ত p ট্যাগের জন্য সিএসএস স্টাইল কোড দেয়া হল।
p.paragraph {
color :red;
text-align:center;
}
সিএসএস স্টাইল কোডে সিএসএস সিলেক্টর অর্থাৎ class এর সাথে এইচটিএমএল ট্যাগ উল্লেখ না করলেও চলে। যেমন ওপরের উদাহরণে p ট্যাগ উল্লেখ না করলেও হবে। নিচে এমন উদাহরণ দেখুন।
.paragraph {
color :red;
text-align:center;
}
নোট - ক্লাস নাম কখনও কোন সংখ্যা (Number) দিয়ে শুরু করবেন না, কারন এটি শুধুমাত্র ইন্টারনেট এক্সপ্লোরার (Internet explorar) এই সাপোর্ট করে।
একই নামের class যুক্ত সকল এইচটিএমএল এলিমেন্টে ঐ স্টাইল কোড প্রযোজ্য হবে। নিচে একটি উদাহরণ দেখুন, যেখানে paragraph নামক ক্লাস যুক্ত সকল এইচটিএমএল এলিমেন্ট এই স্টাইল কোড কাজ করবে।
<head>
<style>
.paragraph {
color :red;
text-align:center;
}
</style>
</head>
<body>
<p class="paragraph">This is a paragraph.</p>
<p class="paragraph">This is another paragraph.</p>
</body>
কোন একটি এইচটিএমএল এলিমেন্টে একাধিক class ব্যবহার করা যায়। প্রতিটি class এর নাম আলাদা করার জন্য class নাম গুলোর মাঝে একটি ফাঁকা স্থান বা space দেয়া হয়।
নিচে একটি উদাহরণ দেখুন, যেখানে একটি এইচটিএমএল p ট্যাগে one এবং two নামে দুইটি ভিন্ন নামের ক্লাস যুক্ত স্টাইল কোড প্রযোজ্য হয়েছে।
<head>
<style>
.one {
color : red;
text-align: center;
}
.two {
font-size : 16px;
text-decoration: bold;
}
</style>
</head>
<body>
<p class="one two">This is a paragraph working with two diffrent style code.</p>
</body>
শেয়ার করুন
