HTML-এ এলিমেন্টের class অ্যাট্রিবিউটের উপর ভিত্তি করে স্টাইল রুল সংজ্ঞায়িত করা হয়। সেই ক্লাস সম্পন্ন এলিমেন্টগুলো সংজ্ঞায়িত রুল অনুযায়ী ফরম্যাট হয়। এটিকে ক্লাস সিলেক্টর (class selector) বলা হয়। নির্দিষ্ট ক্লাসের এলিমেন্ট সিলেক্ট করতে পিরিয়ড (.) ক্যারেক্টার এবং ক্লাসের নাম লিখতে হয়, যেমন .black
.black { color: #000000; }
এটি ক্লাস অ্যাট্রিবিউট black সেট করা সব এলিমেন্টের কন্টেন্ট কালো রেন্ডার করবে। উদাহরণস্বরূপ, শুধু <h3> এলিমেন্টের জন্য ক্লাস black সেট করলে শুধু সেটি কালো হবে।
h3.black { color: #000000; }
আরেক উদাহরণ হতে পারে <p> ট্যাগ স্টাইল করা। নিচের মাধ্যমে ক্লাস "device" সেট করা সব <p> এলিমেন্ট স্টাইল করা হয়েছে:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> p.device { background: #000000; color: #fffffF; } </style> </head> <body> <p>This is demo text</p> <p class="device">Information about devices.</p> <p>This is demo text</p> </body> </html>
<p> ট্যাগের স্টাইলিং একাধিক ক্লাস দিয়ে করা যায়, যেমন এখানে device এবং accessories:
উদাহরণ: একাধিক ক্লাস
<!DOCTYPE html> <html> <head> <style> p.device { background: #000000; color: #fffffF; } p.accessories { text-align: center; } </style> </head> <body> <p class="device accessories">DEVICE DETAILS</p> <p class="device">Information about devices.</p> </body> </html>
