সিএসএস টিউটোরিয়ালঃ ষষ্ঠ পর্ব(সিলেক্টরস পার্ট-৩)

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

সিএসএস সিলেক্টর নিয়ে ৩য় পর্বে স্বাগতম। এই পর্বে আলোচনা করবো গ্রুপ এবং ডিসেন্ডেন্ট সিলেক্টর নিয়ে। তো চলুন…

Group Selector:

নাম দেখেই বুঝায় যায় গ্রুপ সিলেক্ট্রর এর কাজ। গ্রুপ সিলেক্টর সাধারনত আলাদা আইডি বা ক্লাস সিলেক্টর কে একই ডিক্লেয়ারেশন প্রদান করতে ব্যবহার করা হয়। গ্রুপ করতে শুধু মাত্র “,” (কমা) ব্যবহার করে কাজ করতে হয়। পুরো গ্রুপ সিলেক্টরের সিনট্যাক্স হয় #myStyle, .mySecondStyle{propertiy:value;}। এই জন্য আলাদা কোন আইডি, ক্লাস বা অ্যাট্রিবিউট ডিক্লেয়ার করতে হয় না। গ্রুপ সিলেক্টরে আপনি যেসব আইডি বা ক্লাস ইউজ করবেন সেগুলওর জন্য আলদাভাবেও স্টাইল ডিক্লেয়ার করতে পারবেন। এখন দেখুন কিভাবে আপনি গ্রুপ সিলেক্টর ইউজ করবেনঃ

[html]
<html>
<head>
<style type=”text/css”>
#myID, .myClass {
color: red;
font-size: 20px;
}

#myID {
background-color: purple;
font-family: Tahoma;
}
</style>
</head>
<body>

<h2 id=”myID”> Welcome to RangpurSource’s CSS Class! </h2>
<p class=”myClass”> This is CSS ID Selector, Which declaration are same as above H2 tag </p>

</body>
</html>
[/html]

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

Descendant Selector:

Descendant Selector –কে টার্গেট সিলেক্টর বলা যেতে পারে। কারণ নির্দিষ্ট কোন এইচটিএমএল ইলিমেন্ট কে সিএসএস এ কোডিং করার সময় সেটাকে টার্গেট করে করতে হয়। পুরো ডেস্কেন্ডেন্ট সিলেক্টরের সিনট্যাক্স হয় #div h2, #div p{propertiy:value;}। সরাসরি একটি উদাহরণ দিয়ে বেপারটি ক্লিয়ার করছি। ধরুন, আপনার ওয়েব পেজে একটি Div ট্যাগের ভিতরে h2 ইলিমেন্ট আছে। এবং আপনার পুরো ওয়েব পেজ জুড়েও আর একাধিক জায়গায় h2 ইলিমেন্ট আছে। এখন আপনি চাইছেন শুধু মাত্র Div ট্যাগের ভিতরের h2 ইলিমেন্টে ফন্ট ফ্যামিলি Tahoma এবং কালার red করবেন। এপেজের বাকি h2 ইলিমেন্ট বাই ডিফল্ট স্টাইল থাকবে। তাহলে কোডিং করতে হবে নিচের মতোঃ

[html]
<html>
<head>

<body>
<h2> Welcome to RangpurSource’s CSS Class! </h2>

<div>
<h2> This is Heading 2 tag/element inside Div Tag</h2>
</div>

</body>

</html>
[/html]

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