এইচটিএমএল ক্লাস - HTML Class


একাধিক এইচটিএমএল এলিমেন্টে একই রকম স্টাইল কোড ব্যবহার করার জন্য এইচটিএমএল 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 ব্যবহার

এইচটিএমএল এর ইনলাইন এলিমেন্টেও 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>

কোড এডিটর