- সিএসএস টিউটোরিয়ালঃ ১১তম পর্ব(লাইন হাইট এবং টেক্সট ইনডেন্ট)
- সিএসএস টিউটোরিয়ালঃ ১২তম পর্ব(টেক্সট এ্যালাইনমেন্ট)
- সিএসএস টিউটোরিয়ালঃ ১৩তম পর্ব(Ordered List)
- সিএসএস টিউটোরিয়ালঃ ৫ম পর্ব(সিলেক্টরস পার্ট-২)
- সিএসএস টিউটোরিয়ালঃ ২য় পর্ব(গঠন এবং কোডিং এর পদ্ধতি)
- সিএসএস টিউটোরিয়ালঃ ষষ্ঠ পর্ব(সিলেক্টরস পার্ট-৩)
- সিএসএস টিউটোরিয়ালঃ ১ম পর্ব(পরিচিতি)
- সিএসএস টিউটোরিয়ালঃ ৭ম পর্ব(সিলেক্টরস পার্ট-৪)
- সিএসএস টিউটোরিয়ালঃ ৩য় পর্ব(স্টাইলসীটের ধরন)
- সিএসএস টিউটোরিয়ালঃ ৮ম পর্ব(ফন্ট এবং ফন্ট সাইজ)
- সিএসএস টিউটোরিয়ালঃ ৪র্থ পর্ব(সিলেক্টরস পার্ট-১)
- সিএসএস টিউটোরিয়ালঃ ৯ম পর্ব(ফন্ট ওয়েট এবং ফন্ট স্টাইল)
- সিএসএস টিউটোরিয়ালঃ ১০ম পর্ব(ফন্ট ভেরিয়েন্ট এবং ফন্ট কালার)
সিএসএস সিলেক্টর নিয়ে ২এ পর্বে স্বাগতম। এই পর্বে আলোচনা করবো আইডি এবং ক্লাস সিলেক্টর নিয়ে। তো চলুন…
ID Selector:
সিএসএস ID Selector “#” (হ্যাশ) সাইন সাথে কোন একটি সিঙ্গেল স্ট্রিং(ওয়ার্ড) বা ডাবল স্ট্রিং একসাথে দিয়ে প্রকাশ করা হয়। যেমনঃ #myStyle। পুরো আইডি সিলেক্টরের সিনট্যাক্স হয় #myStyle{propertiy:value;}। ধরুনঃ আপনি এইচটিএমএল এর h2 ট্যাগ এবং p ট্যাগ উভয়ের কালার লাল (red), এবং font এর সাইজ 30px করতে চাইছেন। h2 ট্যাগ এবং p ট্যাগ উভয়ের জন্য একই ডিক্লেয়ারেশন প্রকাশ করতে হলে আপনাকে একটি আইডি দিয়ে ডিফাইন করে দিতে হবে। তাহলে এইচটিএমএল পেজে হেড সেকশনে সিএসএস স্টাইল কোড এবং বডি সেকশনে h2 এবং p ট্যাগের মধ্যে উক্ত myStyle আইডি অ্যাট্রিবিউট id=”myStyle” আইডি কল করতে হবে নিচের মতোঃ
[html]
<html>
<head>>
<style type=”text/css”>
#myStyle {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h2 id=”myStyle”> Welcome to RangpurSource’s CSS Class! </h2>
<p id=”myStyle”> This is CSS ID Selector, Which declaration are same as above H2 tag </p>
</body>
</html>
[/html]
Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন idselector বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…
Class Selector:
সিএসএস Class Selector আর ID Selector প্রায় একই। যেমনঃ ID selector এর # এর জায়গায় Class Selector এর ক্ষেত্রে শুধু “.” (ডট বা প্রিয়ড) সাইন সাথে কোন একটি সিঙ্গেল স্ট্রিং(ওয়ার্ড) বা ডাবল স্ট্রিং একসাথে দিয়ে প্রকাশ করা হয়। যেমনঃ .myStyle। পুরো ক্লাস সিলেক্টরের সিনট্যাক্স হয় .myStyle{propertiy:value;}। একইভাবে ধরুনঃ আপনি এইচটিএমএল এর h2 ট্যাগ এবং p ট্যাগ উভয়ের কালার লাল (red), এবং font এর সাইজ 30px করতে চাইছেন। h2 ট্যাগ এবং p ট্যাগ উভয়ের জন্য একই ডিক্লেয়ারেশন প্রকাশ করতে হলে আপনাকে একটি আইডি দিয়ে ডিফাইন করে দিতে হবে। তবে, class ইউজ করার ফলে আপনি একই সাথে একাধিক ক্লাস একটা সেকশনে ইউজ করতে পারবেন কিন্তু id এর ক্ষেত্রে একটার বেশি ইউজ করতে পারবেন না। এইচটিএমএল পেজে হেড সেকশনে সিএসএস স্টাইল কোড এবং বডি সেকশনে h2 এবং p ট্যাগের মধ্যে উক্ত myStyle ক্লাস অ্যাট্রিবিউট class=”myStyle” লিখে কল করতে হবে নিচের মতোঃ
[html]
<html>
<head>
<style type=”text/css”>
.myStyle {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h2 class=”myStyle”> Welcome to RangpurSource’s CSS Class! </h2>
<p class=”myStyle”> This is CSS ID Selector, Which declaration are same as above H2 tag </p>
</body>
</html>
[/html]
Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন idselector বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে। এক্ষেত্রে আইডি সিলেক্টরে যা ভিউ করেছিল ক্লাস সিলেক্টরের ক্ষেত্রেও একই ভিউ করবে…
বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন। 
খুব সুন্দর হচ্ছে। মধ্যপথে থেমে যাবেন না। ইনশাল্লাহ এক্সপার্ট হয়ে যাবো। আপনাকে অসংখ্য ধন্যবাদ।.
থামার জন্য লিখতে শুরু করিনি! তবে, আপনারা পাশে থাকালে আর লিখতে অনুপ্রাণিত হবো! 🙂
ধন্যযোগ! 🙂