এইচটিএমএল এর সব element গুলোকে manipulate করার জন্য সিএসএস এর বিভিন্ন selector ব্যবহার করা হয়।
id , class, type, attribute ইত্যাদির উপর ভিত্তি করে এইচটিএমএল এলিমেন্টগুলো খোঁজা বা নির্বাচন করার জন্য সিএসএস সিলেক্টর ব্যবহার করা হয়।
এলিমেন্ট সিলেক্টর
এলিমেন্ট সিলেক্টর এলিমেন্টের নামের উপর ভিত্তি করে উপাদান নির্বাচন করে।
আমরা সকল <p> এলিমেন্টগুলোকে সিলেক্ট করতে পারি এইভাবে
P {
text-align: center;
color: red;
}
ID Selector
কোন ইউনিক element এর জন্য আমরা id ব্যবহার করে থাকি। একটি পেজ এর মধ্যে ID ইউনিক হওয়া উচিত। কোন element এর নির্দিষ্ট কোন ID কে কল করতে গেলে আমাদের হেস operator ব্যবহার করতে হয়।
যেসকল এইচটিএমএল এর এলিমেন্ট id=”para1″ তাদের সিলেন্ট করতে হয় এভোবে
#para1 {
text-align: center;
color: red;
}
নোটঃ আইডি এর নাম সংখ্যা দিয়ে শুরু করবেন না।
ক্লাস সিলেক্টর
class selector নির্দিষ্ট ক্লাস এট্রিবিউ এর এলিমেন্টগুলি সিলেক্ট করে।
নির্দিষ্ট ক্লাস এর এট্রিবিউটগুলো নির্বাচন করতে class selector কে ডট চিহ্ন দিয়ে সুরু করতে হয়, পরে ক্লাসের নাম উল্লেখ করতে হয়।
নিচের উদারণটি সকল এইচটিএমএল এলিমেন্ট যেগুলোতে class=”center” আছে সেগুলো সিলেক্ট করবে।
.center {
text-align: center;
color: red;
}
ক্লাস দ্বারা আপনি শুধুমাত্র নির্দিষ্ট এইচটিএমএল এলিমেন্ট প্রভাবিত হবে এভাবেও নির্দিষ্ট করে দিতে পারেন।
নিচের উদারণটি সকল এইচটিএমএল <p> এলিমেন্ট যেগুলোতে class=”center” আছে সেগুলো সিলেক্ট করবে।
p.center {
text-align: center;
color: red;
}
নোটঃ আইডি এর নাম সংখ্যা দিয়ে শুরু করবেন না।
Grouping selector
অনেক সময় দেখা যায় অনেকগুলো element এর স্টাইল প্রায় এক রকম থাকে। যেমন
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
কোড ছোট রাখতে আপনি সিলেক্টরগুলোর গ্রুপ তৈরি করতে পারেন।
গ্রুপ তৈরি করতে প্রতিটি সিলেক্টরকে কমা (,) দ্বারা পৃথক করতে হয়।
উদাহরণঃ
h1, h2, p {
text-align: center;
color: red;
}
নিজে নিজে চেষ্টা করো
অনুশীলন ০১ঃ
সকল <p> এলিমেন্ট এর রঙ লাল এ পরিবর্তন কর
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০২ঃ
যে এলিমেন্টগুলোর id=”para1″ সেগুলোর রঙ লাল এ পরিবর্তন কর
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p id="para1">This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০৩ঃ
যেসকল এলিমেন্ট এর ক্লাস “colortext” সেগুলোর রঙ লাল এ পরিবর্তন কর
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p class="colortext">This is another paragraph.</p> <p class="colortext">This is also a paragraph.</p> </body> </html>
অনুশীলন ০৪ঃ
সকল <p> এবং <h1> এলিমেন্ট এর রঙ লাল এ পরিবর্তন কর। কোড ছোট রাখতে এলিমেন্টগুলোর গ্রুপ তৈরি কর।
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a heading</h1> <h2>This is a smaller heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>