Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

সিএসএস ক্লাস - CSS Class


এইচটিএমএল ডকুমেন্টের বিভিন্ন এলিমেন্টকে নির্দিষ্ট ভাবে স্টাইলিং করার জন্য সিএসএস এর class আত্ত্রিবুতে ব্যবহার করা হয়।


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>


কোড এডিটর