HTML class অ্যাট্রিবিউট টি ব্যবহার হয় এইচটিএমএল এলিমেন্ট গুলোকে আলাদা ভাবে সিলেক্ট করতে ।
একটি class অ্যাট্রিবিউট একাধিক এলিমেন্ট এ ব্যবহার করা যায় ।
এইচটিএমএল class অ্যাট্রিবিউট এর ব্যবহার
class attribute টি বেশি ব্যবহার হয় এক বা একাধিক এইচটিএমএল এলিমেন্ট কে ধরে সিএসএস লেখার জন্য । এটি জাভাস্ক্রিপ্ট এ ও ব্যবহার হয় এক বা একাধিক এলিমেন্ট কে আলাদা ভাবে সিলেক্ট করে সেটাকে এক্সেস করতে কিংবা সেটির ভিতরের উপাদান গুলো বদল করতে ।
<div class="city"> ... </div>
উপরের কোড ব্লক টিতে দেখুন, class হল attribute name আর “city” হলো এর Value.
আমরা এর আগে এইচটিএমএল সিএসএস এ দেখেছি বিভিন্য HTML Elements গুলোর জন্য আমরা কালার দিতে পেরেছিলাম । কিন্তু সেগুলো সব এলিমেন্টেই এই প্রয়োগ হয় ( যেমন সব a tag এর জন্য কিংবা সব div tag এর জন্য) ।
আমরা যদি একই এলিমেন্ট এর জন্য আলাদা আলাদা সিএসএস ব্যবহার করতে চাই ( যেমন আলাদা আলাদা div এর জন্য আলাদা আলাদা কালার ব্যবহার করা ) তাহলে সেটি class attribute ব্যবহার করে করতে পারি ।
নিচের উদাহরণ টি দেখুন , আমরা যে সমস্যা div এর class অ্যাট্রিবিউট city ব্যবহার করেছি, সুধু সেগুলোতে আলাদা কালার ব্যবহার হয়েছে, সব div এ হয়নি ।
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div>
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>উপরের কোড ব্লকটি ব্রাউজার এ ওপেন করলে দেখবেন যে প্রথম div এ কোন সিএসএস যোগ হয়নি, কিন্তু নিচের যেগুলোতে class=”city” আছে , সেগুলোতে ব্যকগ্রাউন্ড কালার ও অন্যান্য css যোগ হয়েছে ।
নিচের উদাহরণ এ আমরা দুটি <span> এলিমেন্ট ব্যবহার করেছি class এট্রিবিউটএর সাথে যার ভেলু দিয়েছি ‘note’ । আর দুটি <span> এর জন্য .note এর জন্য CSS লিখবো ।
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>This is an <span class="note">Important</span> Heading</h1>
<p>This is some some of <span class="note">important</span> text.</p>
</body>
</html>class এট্রিবিউট টি যে কোন HTML elements এ ব্যবহার করা যায় ।
class name অর্থাৎ class এট্রিবিউট এর ভেলু case sensitive
class এর ব্যবহার আরো বিস্তারিত আমরা CSS Tutorial এ জানবো ।
Class এর Syntax বা গঠন প্রণালী
HTML এ অন্যান্য এট্রিবিউট এর মতোই লেখা হয় কিন্তু এর জন্য সিএসএস লেখার ক্ষেত্রে ব্যবহার করা হয় . (ডট) ক্লাস নেম বা ভেলুর আগে এবং { } এর মধ্যে লেখা হয় সিএসএস ।
নিচের কোড টি দেখুন
<h2 class="city">London</h2>
এখানে HTML এ class attribute এর ভেলু city এবং এটি ধরে যখন CSS লেখা হবে তখন সেটি হয়ে যাবে CSS selector.
এবার class name (class attribute value) এর জন্য CSS লেখা নিচের মতো করে ।
.city {
background-color: tomato;
color: white;
padding: 10px;
}Multiple Classes
HTML এলিমেন্ট গুলোতে একাধিক class ( আসলে ক্লাসের ভেলু ) ব্যবহার করা যায় ।
একাধিক class ব্যবহার করার জন্য class value তে space ব্যবহার করা হয় । যেমন <div class=”city main”>. এখানে class attribute এর দুটি ভেলু আছে । এবং সবগুলো ক্লাস ধরে ধরে আলাদা আলাদা স্টাইল করা যাবে ।
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background: lightBlue;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p> h2 তে ক্লাস ব্যবহার করা হয়েছে এবং প্রথমটিতে একাধিক ক্লাস ব্যবহার করা হয়েছে। </p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>একাধিক এলিমেন্ট এ একই ক্লাস
একই class name বা class value একাধিক HTML Elements এ ব্যবহার করা যায় ।
নিচের উদাহরন এ <h2> ও <p> দুটিতেই আমরা “city” ব্যবহার করেছি ।
<h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p>
জাভাস্ক্রিপ্ট এ ক্লাস এট্রিবিউট এর ব্যবহার
HTML এর ক্লাস গুলোকে ধরে জাভাস্ক্রিট কোড ও লেখা যায় ।
জাভাস্ক্রিট ক্লাস নেম কে ধরে HTML Elements গুলো এক্সেস করতে পারে getElementsByClassName() মেথড টি ব্যবহার করে ।
নিচের জাভাস্ক্রিট কোড টি ব্যবহার করে class name ‘city’ যুক্ত সব এলিমেন্ট এর ব্যাকগ্রাউন্ড পরিবর্তন করা যাবে একটি বাটনে ক্লিক করে ।
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.background = "green";
}
}
</script>উপরের কোড টি না বুঝলেও চিন্তার কিছু নেই। জাভাস্ক্রিট যখন শিখবেন তখন বিষয়টি ক্লিয়ার হবে ।
অধ্যায় সামারি
- class attribute টি এক বা একাধিক ক্লাস নেম দিতে ব্যবহৃত হয় ।
- ক্লাস গুলো CSS ও JavaScript এ ব্যবহার হয় এইচটিএমএল এর বিভিন্ন এলিমেন্ট গুলো সিলেক্ট করতে ।
- যে কোন এইচটিএমএল এলিমেন্ট এ class attribute টি ব্যবহার করা যায় ।
- class name ( class value ) গুলো Case Sensitive হয় ।
- ভিন্য ভিন্য HTML Elements গুলো একই ক্লাস নেম নিতে পারে ।
- জাভাস্ক্রিট ক্লাস নেম কে ধরে HTML Elements গুলো এক্সেস করতে পারে getElementsByClassName() মেথড টি ব্যবহার করে