সিএসএস টিউটোরিয়ালঃ ৪র্থ পর্ব(সিলেক্টরস পার্ট-১)

This entry is part 11 of 13 in the series সিএসএস

সিএসএস সিলেক্টর বুঝাতে এখানে একটি বাস্তবিক উদাহরণ লক্ষ করুন। ধরুন, আপনি বাজারের একটি নির্দিষ্ট দোকানে গেলেন এবং সেখানে থেকে আপনার বাসার জন্য প্রয়োজনীয় ব্যবহার্য যেমনঃ তেল, সাবান এবং নিত্য দিনের জিনিস ক্রয় করলেন এবং অফিসের জন্য হ্যান্ড ওয়াস, টিস্যু পেপার, কলম ক্রয় করলেন। এখন দেখুন, আপনি একই দোকান থেকে বাসার জন্য এবং অফিসের জন্য প্রোডাক্ট করলেন, সিএসএস এর ভাষায় বাজার হল আপনার ওয়েবসাইট। উক্ত দোকান হল আপনার সিএসএস ফাইল যেখানে আপনি আপনার বাসা বা অফিস জন্য আপনি প্রয়োজন অনুযায়ী প্রোডাক্ট কিনলেন। আপনার বাসা এবং অফিস হল বিভিন্নত ধরনের সিলেক্টর যাদের জন্য আলাদা আলাদা প্রোডাক্ট কিনেন। আপনার ক্রয় করা প্রোডাক্ট গুলো হল প্রোপার্টি এবং প্রোডাক্ট কিনতে যে অর্থ ব্যয় করছেন সেটা হল উক্ত প্রোপার্টি এর ভাল্যু। মনে রাখবেন, আপনি যখনই কোন সিএসএস ফাইল নিয়ে কাজ করবেন, তখনই আপনাকে একটি প্রোপার্টি, তাঁর ভাল্যু নিয়ে কাজ করতে হবে। আর এই প্রোপার্টি এবং ভাল্যুকে একত্রে ডিক্লেয়ারেশন বলে। এসব নিয়ে পরবর্তিতে আর জানবো।

সিএসএস এ কয়েক ধরণের সিলেক্টর এর ব্যবহার লক্ষ করা যায়। বিভিন্ন কাজের এসব সিলেক্টরকে ব্যবহার করা হয়। এই অংশে শুধু জেনে রাখুন সাত ধরনের সিলেক্টর রয়েছে। যেমনঃ

১. Element or Tag Selector,

২. ID Selector,

৩. Class Selector,

৪. Group Selector,

৫. Descendent Selector,

৬. Pseudo Class Selector,

৭. Universal Selector.

এছাড়াও, সিএসএস ৩ ভার্সনে নতুন কিছু সিলেক্টর এর প্রত্যাবর্তন হয়েছে। যেগুলো, আমরা এই সিরিজের শেষের দিকে সিএসএস ৩ অধ্যায়ে আলোচনা করছি। এখন এই সিলেক্টর গুলোকে কিভাবে প্রকাশ করা হয় তা দেখিঃ

Element or Tag Selector:

ইলিমেন্ট বা ট্যাগ সিলেক্টর বলতে এইচটিএমএল এর রেগুলার ট্যাগ গুলোকে বুঝায়। যেমন ধরুনঃ আপনি এইচটিএমএল এর h2 ট্যাগ এর কালার লাল (red), এবং font এর size 30px করতে চাইছেন। তাহলে আপনাকে h2 ট্যাগের জন্য সিএসএস সেকশন/পেজে কোড লিখতে হবে নিচের মতোঃ

[html]
<html>
<head>
<style type=”text/css”>
h2 {
color: red;
font-size: 20px;
}
</style><
<</head>
<body>
<h2> Welcome to RangpurSource’s CSS Class! </h2>
</body>
</html>
[/html]

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেও কপি-পেস্ট করবেন না। ফাইলের নাম দিন elementselector বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…