এইচটিএমএল এর ট্যাগ গুলোর জন্য আলাদা করে স্টাইল রুল লেখার পাশা পাশি CSS এ ID এবং Class দিয়ে আমাদের নিজস্ব selector তৈরি করতে পারি। পরে এই selector গুলো যেকোন এইচটিএমএল ট্যাগ/element এর মধ্যে ব্যবহার করতে পারি।
ID দিয়ে এইচটিএমএল এর একটি নির্দিষ্ট ইলিম্যান্টকে স্টাইল দেওয়ার কাজে ব্যবহৃত হয়।
- একটি ইলিম্যান্ট এর জন্য একটি মাত্র ID ব্যবহার করা যায়।
- একটি ID একটি পেইজে মাত্র একবার ব্যবহার করা যায়।
সিএসএস এ id এর রুল গুলো লেখা শুরু করার আগে # চিহ্ন দিতে হয় তারপর id এর নাম এবং শেষে দ্বিতীয় ব্র্যাকেটের মধ্যে সিএসএস রুল গুলো লিখতে হয়, যেমনঃ
|
1
2
3
4
5
6
7
8
|
#myid{font-size:20px;color:blue;...} |
সিএসএস এ লেখা id যেকোন এইচটিএমএল ইলিম্যান্ট এ সেট করার জন্য এইচটিএমএল এর অপেনিং ট্যাগ এর মধ্যে লিখতে হয়। এবং লেখা হয় id=”idname” দিয়ে। যেমনঃ
|
1
|
<h1 id="myid">... </h1> |
উদাহরনঃ উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে দেখতে পারেন।
বিদ্রঃ আমরা সম সময় উদাহরন হিসেবে Internal style sheet ব্যবহার করব।
কোড গুলোঃ
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html><head><title>ID Example</title> <style> p { color:red; } #myid { color:blue; } </style></head><body><h1> Hello web! </h1><p>This is a paragraph </p><p id="myid">This is another paragraph with an id </p><p>This is another paragraph with an id </p></body></html> |
উপরের উদাহরনে সব গুলো p ট্যাগ এর রঙ হচ্ছে লাল। কিন্তু আমরা চাচ্ছি যে একটা p ট্যাগ এর রঙ হবে নীল। তাই আমরা p ট্যাগ এর রঙ নীল দিতে চাই তার জন্য একটা id লিখলাম myid দিয়ে। এবং ঐ p ট্যাগ এর মধ্যে id=”myid” দিয়ে সেট করলাম।
অপর দিকে class দিয়ে একের অধিক ইলিম্যান্টকে স্টাইল দেওয়া যায়।
- একই class একের অধিক ইলিম্যান্ট এর মধ্যে থাকতে পারে।
- একই ইলিম্যান্ট এর একের অধিক class থাকতে পারে।
সিএসএস এ class এর রুল গুলো লেখা শুরু করার আগে . [ডট] চিহ্ন দিতে হয় তারপর class এর নাম এবং শেষে দ্বিতীয় ব্র্যাকেটের মধ্যে সিএসএস রুল গুলো লিখতে হয়, যেমনঃ
|
1
2
3
4
5
6
7
8
|
.myclass{text-align:center;color:blue;...} |
সিএসএস এ লেখা class যেকোন এইচটিএমএল ইলিম্যান্ট এ সেট করার জন্জয ন্য এইচটিএমএল এর অপেনিং ট্যাগ এর মধ্যে লিখতে হয়। এবং লেখা হয় class=”classname” দিয়ে। যেমনঃ
|
1
|
<p class="myclass">... </p> |
আমরা আগেই জানলাম যে একই class একের অধিক ইলিম্যান্ট এ যোগ করা যায়। যেমনঃ
|
1
2
3
4
5
|
<h1 class="myclass"> .... </h1><p class="myclass"> .... </p><h3 class="myclass"> .... </h3> |
আবার একের অধিক ক্লাস একই ইলিম্যান্ট এ যোগ করা যায়, আর তার জন্য শুধু মাত্র স্পেস দিয়ে দ্বিতীয় class লিখতে হয়। এভাবে একের অধিক যত গুলো ইচ্ছে তত গুলো লেখা যায়। এর ফলে সব গুলো class এ যত গুলো স্টাইল রুল রয়েছে সব গুলোই ঐ ট্যাগ এ প্রয়োগ হবে। যেমনঃ
|
1
2
3
|
<p class="myclass myclass2"> .... </p><p class="myclass myclass2 myclass3"> .... </p> |
উদাহরনঃ উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে দেখতে পারেন।
কোড গুলোঃ
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html><head><title>ID Example</title> <style> p { color:red; } .myclass { color:blue; }.myclass2 { font-size:20px; font-weight:bold; } </style></head><body><h1> Hello web! </h1><p>This is a paragraph </p><p class="myclass">This is another paragraph with a class </p><p>This is another paragraph </p><p class="myclass2">This is another paragraph with another class </p><p class="myclass myclass2">This is a paragraph with two class</p></body></html> |
উপরে আমরা myclass একটা p ট্যাগ এ সেট করছি। যার রঙ হচ্ছে নীল [color:blue;] । আরেকটি class – myclass2 এর ফন্ট সাইজ হচ্ছে ২০ পিক্সেল এবং তা বোল্ড। [font-size:20px; font-weight:bold;] তাই এর ভেতরের লেখা গুলোকে বড় করে দেখতে পাচ্ছি।
এবং সবার শেষে আমরা একটি p ট্যাগ এ এক সাথে দুটি class সেট করলাম। তার পরে দুইটি class এ যত গুলো স্টাইল রুল রয়েছে সব গুলোই এ p ট্যাগ এ প্রয়োগ হয়েছে।