একাধিক এইচটিএমএল এলিমেন্টে একই রকম স্টাইল কোড ব্যবহার করার জন্য এইচটিএমএল class এট্রিবিউট ব্যবহার করা হয়। ক্লাস সিলেক্টর ব্যবহার করে কোন একই ক্লাস যুক্ত একাধিক এইচটিএমএল এলিমেন্টে সিএসএস স্টাইল কোড বা জাভাস্ক্রিপ্ট কোড ব্যবহার করা যায়।
সিএসএস এ ক্লাস ব্যবহার করতে হলে একটি ডট ছিনহ ( . ) ব্যবহার করতে হয় এবং তারপর ক্লাসের নাম লিখতে হয়। তারপর ঐ এলিমেন্টের সিএসএস স্টাইল কোড গুলো class name এর পরে এক্তি ২য় বন্ধনীর মাঝে লেখা হয়। নিচে ের উদাহরণ দেখুন।
<style> .city {
background-color: tomato;
color: black;
padding: 15px;
}
</style>
<h2 class="city">Delhi</h2>
<p>Delhi is the capital of India.</p>
নোট - ক্লাস এট্রিবিউট সকল এইচটিএমএল এলিমেন্টে ব্যবহার করা যায়। ক্লাস এট্রিবিউটের নাম কেজ সেন্সিতিভ।
নোট - ক্লাস সিলেক্টর সম্পর্কে আরও জানতে আমাদের সিএসএস ক্লাস ও সিএসএস আইডি টিউটোরিয়াল পেজ গুলো ব্রাউজ করুন।
getElementsByClassName() মেথড ব্যবহার করে জাভাস্ক্রিপ্ট নির্দিষ্ট কোন নামের ক্লাস যুক্ত এলিমেন্টে কাজ করতে পারে। নিচে এর উদাহরণ দেখুন। এখানে যখন কোন ইউজার একটি বাটনে ক্লিক করে, তখন "city" নাম যুক্ত সকল ক্লাস অদৃশ্য বাঁ hide হয়ে যায়।
<script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script>
নোট - জাভাস্ক্রিপ্ট সম্পর্কে জানতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল দেখুন।
একটি এইচটিএমএল এলিমেন্টে একাধিক ক্লাস যুক্ত করা যায়। প্রতিটি ক্লাসের নাম একটি করে স্পেস বা space দিয়ে পৃথক করা যায়।
<h2 class="city main">Delhi</h2>
<h2 class="city">Colombo</h2>
<h2 class="city">Dhaka</h2>
উপরের উদাহরণে প্রথম <h2> এলিমেন্টে "city" এবং "main" এই ২টি ক্লাসের স্টাইলই কাজ করবে।
একই নামের ক্লাস ভিন্ন ভিন্ন ট্যাগের জন্য ব্যবহার করা যায়। যেমন <h2> এবং <p> এলিমেন্টে একই ক্লাসের স্টাইল কাজ করবে। নিচে একটি উদাহরণ দেখুন।
<h2 class="city">India</h2>
<p class="city">Delhi is the capital of india</p>
এইচটিএমএল এর ইনলাইন এলিমেন্টেও class এট্রিবিউটটি ব্যবহার করা হয়। নিচে এর একটি উদাহরণ দেখুন।
<style> .note { font-size: 100%; color: Teal; } </style> </head> <body> <h1>Free <span class="note">web design</span> tutorials</h1> <p>Free <span class="note">web design</span> tutorials</p>