একই class নামযুক্ত এলিমেন্টের জন্য একই রকম স্টাইল নির্ধারণ করতে HTML class অ্যাট্রিবিউট ব্যবহার করা হয়।
অর্থাৎ, একই class অ্যাট্রিবিউটযুক্ত সব HTML এলিমেন্ট একই স্টাইল পাবে।
এখানে আমাদের তিনটি <div> এলিমেন্ট আছে, যেগুলো একই class নাম নির্দেশ করে:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>HTML class অ্যাট্রিবিউট ইনলাইন এলিমেন্টেও ব্যবহার করা যায়:
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>টিপস: class অ্যাট্রিবিউট যেকোনো HTML এলিমেন্টে ব্যবহার করা যায়।
মনে রাখবেন: class নাম কেস-সেনসিটিভ!
টিপস: আমাদের CSS টিউটোরিয়ালে CSS সম্পর্কে আরও অনেক কিছু জানতে পারবেন।
CSS-এ, নির্দিষ্ট class-যুক্ত এলিমেন্ট সিলেক্ট করতে, একটি ডট (.) চিহ্ন লিখে তারপর class-এর নাম লিখতে হয়:
"city" class নামযুক্ত সব এলিমেন্ট স্টাইল করতে CSS ব্যবহার করুন:
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>একটি HTML এলিমেন্টের একাধিক class নাম থাকতে পারে, প্রতিটি class নামকে একটি স্পেস দিয়ে আলাদা করতে হয়।
"city" class নামযুক্ত এলিমেন্ট এবং "main" class নামযুক্ত এলিমেন্ট, দুটোই স্টাইল করুন:
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>উপরের উদাহরণে, প্রথম <h2> এলিমেন্টটি "city" এবং "main" — দুটো class-এরই অন্তর্গত।
<h2> এবং <p>-এর মতো বিভিন্ন ট্যাগের একই class নাম থাকতে পারে, এবং এভাবে তারা একই স্টাইল শেয়ার করতে পারে:
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>নির্দিষ্ট class নামযুক্ত এলিমেন্টের জন্য নির্দিষ্ট কিছু কাজ করতে JavaScript-ও class নাম ব্যবহার করতে পারে।
JavaScript getElementsByClassName() মেথড ব্যবহার করে নির্দিষ্ট class নামযুক্ত এলিমেন্ট অ্যাক্সেস করতে পারে:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>