সিএসএস টিউটোরিয়াল ID & Class

সিএসএস টিউটোরিয়াল ID & Class

এইচটিএমএল এর ট্যাগ গুলোর জন্য আলাদা করে স্টাইল রুল লেখার পাশা পাশি  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 ট্যাগ এ প্রয়োগ হয়েছে।

Share This Post

Post Comment