এইচটিএমএল এলিমেন্ট গুলো স্টাইল করতে সিএসএস সিলেক্টর এর ব্যবহার বেস গুরুত্বপূর্ণ। এই অধ্যায়ে সিএসএস এর বিভিন্ন সিলেক্টর সম্পর্কে আলোচনা করা হয়েছে।
যে সকল এইচটিএমএল এলিমেন্টে স্টাইল কোড প্রয়োগ করতে হবে, সে গুলো কে খুজে পেতে বা নির্ধারণ করতে সিএসএস সিলেক্টর ব্যবহার করা হয়। অর্থাৎ কোন এইচটিএমএল এলিমেন্টকে, নির্দিষ্ট ভাবে নির্ধারণ করে তাতে স্টাইল কোড প্রয়োগ করার পদ্ধতিটিই হল সিএসএস সিলেক্টর।
নিচে একটি সাধারণ সিএসএস সিলেক্টর এর উদাহরণ দেখুন।
<head> <style> p { color : red; text-align: center; } </style> </head> <body> <p">This is a paragraph working with two diffrent style code.</p> </body>
ব্যবহারের ওপর নির্ভর করে সিএসএস সিলেক্টর গুলোকে বিভিন্ন ভাগে ভাগ করা যায়। নিচে এগুলো দেখুন।
এছাড়াও আরও কিছু সিলেক্টর আছে, যেমন - সিডো-ক্লাস সিলেক্টর, সিডো-এলিমেন্ট সিলেক্টর, এট্রিবিউট সিলেক্টর ইত্যাদি এগুলো সিএসএস টিউটোরিয়াল এর অ্যাডভান্সড অংশে আলোচনা করা হয়েছে।
এইচটিএমএল এলিমেন্টের নাম অর্থাৎ ট্যাগকেই সিএসএস সিলেক্টর রুপে ব্যবহার করে সিএসএস স্টাইল নির্ধারণ করা যায়।
নিচে একটি উদাহরণ দেখুন, যেখানে কেবল এইচটিএমএল ট্যাগ অর্থাৎ h1 ও p ট্যাগকে সিএসএস সিলেক্টর হিসেবে ব্যবহার করা হয়েছে।
h1 { color : blue; text-align: center; } p { color : red; text-align: right; }
একিই রকম স্টাইল কোড গুলো, ভিন্নি ভিন্ন রকমের এইচটিএমএল এলিমেন্টে ব্যবহার করার জন্য সিএসএস গ্রুপ সিলেক্টর ব্যবহার করা হয়। স্টাইল কোড গুলোর শুরুর দিকে দ্বিতীয় বন্ধনী বা secound braket " { } " এর বাইরে এইচটিএমএল সিলেক্টর গুলোর নাম লিখে এই গ্রুপ সিলেক্টর তৈরি করা হয়। এইচটিএমএল সিলেক্টর গুলোর নামের মাঝে কমা বা comma " , " ছিনহ ব্যবহার করে নাম গুলো আলাদা করে দেয়া হয়।
নিচে একটি উদাহরণ দেখুন, যেখানে স্টাইল কোড গুলো ওয়েব পেজের নির্ধারিত এইচটিএমএল এলিমেন্টের ক্ষেত্রে প্রযোজ্য হবে।
h1, h2, p { color : blue; text-align: center; }
কোন ওয়েব পেজে থাকা সকল এলিমেন্ট এর জন্য নির্দিষ্ট কিছু স্টাইল নির্ধারণ করতে সিএসএস এর সার্বজনীন বা Universal সিলেক্টর পদ্ধতি ব্যবহার করা হয়।
স্টাইল কোড গুলোর প্রথমে দ্বিতীয় বন্ধনী বা secound braket " { } " এর বাইরে একটি তারকা বা star " * " ছিনহ ব্যবহার করে Universal সিলেক্টর তৈরি করা হয়।
নিচে একটি উদাহরণ দেখুন, যেখানে স্টাইল কোড গুলো ওয়েব পেজের সকল এলিমেন্টে প্রযোজ্য হবে।
* { margin: 25px; padding:30px; }
এইচটিএমএল এর যে কোন ট্যাগের সাথে class আত্ত্রিবুতে ব্যবহার করে ক্লাস সিলেক্টর তৈরি করা হয়। নিচে class আত্ত্রিবুতে এর একটি উদাহরণ দেখুন।
<head> <style> .paragraph { color : red; text-align: center; } </style> </head> <body> <p class="paragraph">This is a paragraph working with class selector.</p> </body>
নোট - পরবর্তী অধ্যায়ে আমরা সিএসএস class সিলেক্টর সম্পর্কে বিস্তারিত আলোচনা করেছি।
এইচটিএমএল এর যে কোন ট্যাগের সাথে id আত্ত্রিবুতে ব্যবহার করে আইডি সিলেক্টর তৈরি করা হয়। নিচে id আত্ত্রিবুতে এর একটি উদাহরণ দেখুন।
<head> <style> #paragraph { color : teal; text-align: center; } </style> </head> <body> <p id="paragraph">This is a paragraph working with id seclector.</p> </body>
নোট - পরবর্তীতে একটি অধ্যায়ে আমরা সিএসএস id সিলেক্টর সম্পর্কে বিস্তারিত আলোচনা করেছি।
সিএসএস এর সিলেক্টর সম্পর্কে Mozilla Developer থেকে আরও জানতে Selector (CSS) ওয়েব পেজটি ব্রাউজ করুন।