X

X

X

HTML class এট্রিবিউট


ক্লাস এট্রিবিউটের ব্যবহার

একটি স্কুল বা যেকোনো শিক্ষা প্রতিষ্ঠানের কোনো ডিপার্টমেন্টের কথা চিন্তুা করুন। আমরা ছাত্রছাত্রীদের কিভাবে চিহ্নিত বা তাদের বিভিন্ন দল ও উপদলে ভাগ করি। প্রথমত, তাদের সবারই ক্লাস ও আইডি বা রোল নম্বর থাকে। একটি আইডি বা রোল নম্বর শুধুমাত্র একজন শিক্ষার্থীরই হতে পারে, কিন্তু একাধিক শিক্ষার্থীর ক্লাস একই হতে পারে।
সেরকমভাবে, HTML ইলামেন্টসমূহকে গ্রুপিং করার জন্য id ও class attribute ব্যবহার করা হয়। একাধিক ইলামেন্টের একই class হতে পারে। কিন্তু প্রতিটি ইলামেন্টের id অবশ্যই অভিন্ন হতে হবে।
নোট : পরবর্তীতে জাভাস্ক্রিপ্ট নিয়ে যখন কাজ করবেন, তখন বুঝতে পারবেন যে, প্রতিটি id এক একটি গ্লোবাল ভ্যারিয়েবল হিসেবে বিবেচিত হয়। যেকারণে জাভাস্ক্রিপ্ট কিওয়ার্ড দিয়ে কখনও Element এর id লিখবেন না। অনাকাঙ্খিত ভুল হতে পারে।

নিচে তিনটি <div> element দেখানো হলো, তাদের সবার জন্য একই class নাম ব্যবহার করা হয়েছে।

Code Example

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the région parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

London

London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Paris

Paris is the capital and most populous city of France.

Situated on the Seine River, it is at the heart of the Ĩle-de-France region, also known as the région parisienne.

Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.

The Tokyo prefecture is part of the world’s most populous metropolitan area with 38 million people and the world’s largest urban economy.


ইনলাইন ইলামেন্টে ক্লাস attribute এর ব্যবহার

ইনলাইন ইলামেন্টেও ক্লাস attribute ব্যবহার করা যায়। নিচের উদাহরণটি লক্ষ্য করুন।

Code Example

<!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>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।