XHTML (Extensible Hypertext Markup Language) ডকুমেন্টে স্টাইলিং করার জন্য CSS (Cascading Style Sheets) ব্যবহার করা হয়। CSS-এ দুটি প্রধান সিলেক্টর রয়েছে যা ডকুমেন্টের উপাদানগুলোকে সঠিকভাবে সজ্জিত করতে সাহায্য করে: ক্লাস (class) এবং আইডি (id)। এগুলোকে ব্যবহার করে আপনি HTML বা XHTML ডকুমেন্টের নির্দিষ্ট উপাদানগুলোকে স্টাইল করতে পারেন।
XHTML ডকুমেন্টে স্টাইলিং করতে ক্লাস এবং আইডি ব্যবহার করার নিয়মাবলী এবং উদাহরণ এখানে ব্যাখ্যা করা হবে।
১. ক্লাস (class) দিয়ে স্টাইলিং
১.1 ক্লাস সিলেক্টর
CSS-এ ক্লাস সিলেক্টর দিয়ে একাধিক উপাদানকে একইভাবে স্টাইল করতে সাহায্য করে। একটি ক্লাস সাধারণত একই ধরনের উপাদানগুলোতে একযোগভাবে প্রয়োগ করা হয়। ক্লাস সিলেক্টর . (ডট) দিয়ে চিহ্নিত করা হয়।
উদাহরণ:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML Class Styling</title>
<style>
.highlight {
color: blue;
font-size: 18px;
}
.important {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p class="highlight">This is a highlighted paragraph.</p>
<p class="important">This paragraph is important!</p>
<p class="highlight important">This paragraph is both highlighted and important.</p>
</body>
</html>
এখানে:
.highlightক্লাসটি প্যারাগ্রাফের টেক্সটের রঙ নীল (blue) এবং ফন্ট সাইজ ১৮ পিক্সেল করে দিয়েছে।.importantক্লাসটি প্যারাগ্রাফটির টেক্সটের রঙ লাল (red) এবং ফন্টটি বোল্ড (bold) করেছে।
একাধিক ক্লাস একসাথে ব্যবহার করা যাবে, যেমন class="highlight important"।
২. আইডি (id) দিয়ে স্টাইলিং
২.1 আইডি সিলেক্টর
CSS-এ আইডি সিলেক্টর একটি একক উপাদানকে নির্দিষ্টভাবে সিলেক্ট এবং স্টাইল করার জন্য ব্যবহৃত হয়। আইডি সিলেক্টর # (হ্যাশ) চিহ্ন দিয়ে চিহ্নিত করা হয়। একটি আইডি শুধুমাত্র একবার ব্যবহার করা উচিত, অর্থাৎ একটি ডকুমেন্টে একটি নির্দিষ্ট আইডি শুধুমাত্র একবার প্রযোজ্য হতে পারে।
উদাহরণ:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML ID Styling</title>
<style>
#header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
#footer {
background-color: #f1f1f1;
color: black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">Welcome to My Website</div>
<p>This is a sample page.</p>
<div id="footer">Footer Information</div>
</body>
</html>
এখানে:
#headerআইডি ট্যাগটির পটভূমি সবুজ (green) এবং টেক্সট সাদা (white) করা হয়েছে।#footerআইডি ট্যাগটির পটভূমি সাদা (white) এবং টেক্সট কালো (black) করা হয়েছে।
আইডি সিলেক্টরটি নির্দিষ্ট উপাদান এককভাবে চিহ্নিত করতে ব্যবহার করা হয় এবং প্রতিটি আইডি একবারই ব্যবহৃত হয়।
৩. ক্লাস এবং আইডি সিলেক্টরের পার্থক্য
৩.1 ক্লাস সিলেক্টর:
- একাধিক উপাদানে প্রযোজ্য হতে পারে।
- একাধিক উপাদানকে একই স্টাইল দেওয়া যায়।
- একটি ক্লাস অনেক উপাদানকে একযোগভাবে স্টাইল করতে ব্যবহার করা যায়।
৩.2 আইডি সিলেক্টর:
- একটি ডকুমেন্টে শুধুমাত্র একবার ব্যবহার করা উচিত।
- একটি নির্দিষ্ট উপাদানকে লক্ষ্য করে স্টাইল দিতে ব্যবহৃত হয়।
- আইডি সিলেক্টর একটি নির্দিষ্ট উপাদানের জন্য এককভাবে প্রযোজ্য।
৪. ক্লাস এবং আইডি ব্যবহার করার ক্ষেত্রে টিপস
৪.1 ক্লাস সিলেক্টর ব্যবহার করুন যখন:
- আপনি একাধিক উপাদানে এক ধরনের স্টাইল প্রয়োগ করতে চান।
- একই স্টাইল অনেক জায়গায় ব্যবহার হবে।
৪.2 আইডি সিলেক্টর ব্যবহার করুন যখন:
- আপনি একটি নির্দিষ্ট উপাদানকে আলাদা এবং বিশেষভাবে স্টাইল করতে চান।
- শুধু একবার প্রয়োগ করা প্রয়োজন এমন স্টাইলের জন্য আইডি ব্যবহার করুন।
XHTML ডকুমেন্টে ক্লাস এবং আইডি সিলেক্টরের মাধ্যমে স্টাইলিং করা সহজ এবং কার্যকর। ক্লাস সিলেক্টর একাধিক উপাদানের জন্য এবং আইডি সিলেক্টর একক উপাদানের জন্য ব্যবহৃত হয়। CSS এর সাহায্যে ক্লাস এবং আইডি সিলেক্টর ব্যবহার করে আপনি আপনার XHTML ডকুমেন্টের ডিজাইন এবং লেআউট কাস্টমাইজ করতে পারবেন।
Read more
