HTML class (Global Attribute)
class অর্থ শ্রেনী। এলিমেন্টকে ভিন্ন ভিন্ন শ্রেনীতে ষ্টাইল করার ক্ষেত্রে class এট্রিবিউট ব্যবহার করা হয়। এইচটিএমএল class এটি একটি বহুল ব্যবহ্নত এট্রিবিউট। এইচটিএমএল এলিমেন্টকে ষ্টাইল কিংবা স্ক্রীপ্ট প্রয়োগ করার কাজে একটি ক্লাস নির্ধারণ করার জন্য এই এট্রিবিউটটি ব্যবহার করা হয়। একাধিক এলিমেন্টকে একই ধরনের ষ্টাইল করার জন্য এই এট্রিবিউট অধিকতর ব্যবহ্নত হয়। class এট্রিবিউটের সব চেয়ে বড় সুবিদা হচ্ছে এটির মাধ্যমে একটি এলিমেন্টের জন্য একাধিক ক্লাস নাম সেট করা যায়। ফলে একাধিক এলিমেন্টের জন্য একটি ষ্টাইল সেটিং করার পর তার মধ্য বিশেষ কোন একটি এলিমেন্টকে ভিন্ন ষ্টাইলে প্রদর্শণ করা যায়। আমি ভিন্ন ভিন্ন উদাহরণ দেখিয়েছি। উদাহরণে খিয়াল করে দেখুন, আমি দুইটি div এর জন্য Demo নামের একটি class দিয়েছি। আর ষ্টাইলও করেছি একটি কিন্তু দ্বিতীয় div এর জন্য Green নামের আর একটি class এড করেছি। ফলে সেটার ব্যাকগ্রাউন্ড কালার এক লাইন কোড লিখেই সম্পূর্ণ পরিবর্তন করে ফেলেছি। এটিই হচ্ছে class এট্রিবিউট ব্যবহারের প্রধান সুবিদা। শুধু ষ্টাইলের জন্য নয়, স্ক্রীপ্টের জন্যও এভাবে ভিন্ন ভিন্ন ফাংশন প্রয়োগ করা যাবে। সিএসএস কোড লিখার সময় ক্লাসের নাম দেবার আগে একটি . (ডট) ব্যবহার করুন। ডট হচ্ছে ক্লাস সেলেকশনের প্রধান সংকেত। আর ক্লাসের নাম দেওয়ার ক্ষেত্রে ইংরেজী অক্ষরসেট [A-Z a-z] এর সাথে ডিজিট অর্থাৎ [0-9] ক্লাসের নামকে ভাগ করার জন্য হাইফেন [-] এবং আন্ডারস্কোর [ _ ] ব্যবহার করতে পারেন। আরো জানতে ভিডিও টিউটোরিয়ালটি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML class Attribute</title>
<style>
.demo{
height:200px;
width:300px;
background:yellow;
margin:10px;
color:white;
font-size:18px;
text-align:center;
}
.Green{
background:green;
}
.demo p{
background-color:red;
padding:7px;
}
</style>
</head>
<body>
<div class="demo">
<p>এটি একটি হলুদ ডিভিশন।</p>
</div>
<div class="demo Green">
<p>এটি একটি সবুজ ডিভিশন।</p>
</div>
</body>
</html>
ফলাফল
ইনলাইন এলিমেন্টে class এট্রিবিউট
<style>
h4{
color:Green;
}
.desh{
color:Red;
}
</style>
<h4>আমার দেশ <span class="desh">বাংলাদেশ</span> আমি <span class="desh">বাংলাদেশ</span> কে অনেক ভালবাসি। </h4>
class এট্রিবিউটের ব্রাউজার সাপোর্ট
এট্রিবিউট |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| class | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ | হ্যাঁ |
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন