XHTML ডকুমেন্টে CSS (Cascading Style Sheets) ব্যবহার করে ডিভ (div) এবং স্প্যান (span) ট্যাগগুলোকে স্টাইল করা হয়। CSS ব্যবহার করলে আপনি HTML বা XHTML ট্যাগের চেহারা এবং উপস্থাপনাকে নিয়ন্ত্রণ করতে পারেন। ডিভ এবং স্প্যান দুটি গুরুত্বপূর্ণ ব্লক-লেভেল এবং ইনলাইন এলিমেন্ট হিসেবে ব্যবহৃত হয়।
১. ডিভ (div) এবং স্প্যান (span) ট্যাগের ভূমিকা
১.1 ডিভ (div)
<div> ট্যাগটি একটি ব্লক-লেভেল এলিমেন্ট, যা পেজের একটি বৃহত্তর বিভাগ বা কনটেন্টের গ্রুপিং করতে ব্যবহৃত হয়। এটি মূলত একাধিক এলিমেন্টকে একটি নির্দিষ্ট অঞ্চলে সজ্জিত করার জন্য ব্যবহার হয়।
উদাহরণ:
<div>
<h1>Header of Section</h1>
<p>This is a paragraph inside a div.</p>
</div>
১.2 স্প্যান (span)
<span> ট্যাগটি একটি ইনলাইন এলিমেন্ট, যা সাধারণত একটি ছোট অংশ বা টেক্সটের মধ্যে সজ্জা প্রয়োগ করার জন্য ব্যবহৃত হয়। এটি কোন ব্লক তৈরি করে না, বরং টেক্সটের নির্দিষ্ট অংশে স্টাইল প্রয়োগের জন্য ব্যবহার করা হয়।
উদাহরণ:
<p>This is a <span style="color: red;">highlighted</span> word.</p>
২. CSS দিয়ে ডিভ এবং স্প্যান স্টাইলিং
CSS ব্যবহারের মাধ্যমে আপনি ডিভ এবং স্প্যান ট্যাগের বিভিন্ন দিক নিয়ন্ত্রণ করতে পারেন, যেমন ব্যাকগ্রাউন্ড, মার্জিন, প্যাডিং, রঙ, ফন্ট, সীমা ইত্যাদি।
২.1 ডিভ স্টাইলিং
ডিভ ট্যাগের মাধ্যমে আপনি ব্লক এলিমেন্টের পুরো কাঠামো নিয়ন্ত্রণ করতে পারেন। CSS দিয়ে এর প্রস্থ, উচ্চতা, ব্যাকগ্রাউন্ড, বর্ডার ইত্যাদি পরিবর্তন করা যায়।
উদাহরণ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Div Styling Example</title>
<style type="text/css">
.myDiv {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: lightblue;
border: 2px solid #000;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>Welcome to Our Website</h2>
<p>This section is styled using CSS within XHTML document.</p>
</div>
</body>
</html>
এখানে:
.myDivক্লাসের মাধ্যমে CSS এর স্টাইলিং করা হয়েছে।width,margin,padding,background-color,borderইত্যাদি প্রপার্টি দিয়ে ডিভ ট্যাগের চেহারা নিয়ন্ত্রণ করা হয়েছে।
২.2 স্প্যান স্টাইলিং
স্প্যান ট্যাগটি ইনলাইন উপাদান হিসেবে ব্যবহৃত হয়, তবে CSS দিয়ে এটি দিয়ে টেক্সটের আকার, রঙ, ফন্ট, ব্যাকগ্রাউন্ড ইত্যাদি পরিবর্তন করা সম্ভব।
উদাহরণ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Span Styling Example</title>
<style type="text/css">
.highlight {
color: red;
font-weight: bold;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a <span class="highlight">highlighted</span> text inside a paragraph.</p>
</body>
</html>
এখানে:
.highlightক্লাসের মাধ্যমে স্প্যান ট্যাগের টেক্সট রঙ, ফন্টের স্টাইল এবং ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
৩. CSS দিয়ে ডিভ এবং স্প্যান একসাথে স্টাইলিং
অনেক সময় ডিভ এবং স্প্যান একসাথে ব্যবহার করে একটি পেজের ভিজ্যুয়াল কাঠামো তৈরি করা হয়। CSS দিয়ে একে অন্যের মধ্যে সম্পর্ক স্থাপন করা যায়।
উদাহরণ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Div and Span Styling</title>
<style type="text/css">
.container {
width: 100%;
padding: 20px;
background-color: lightgrey;
}
.section {
width: 80%;
margin: 10px auto;
padding: 10px;
background-color: #f9f9f9;
}
.highlight {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<div class="section">
<h2>Section 1</h2>
<p>This is a <span class="highlight">highlighted</span> text inside section 1.</p>
</div>
<div class="section">
<h2>Section 2</h2>
<p>This is a <span class="highlight">highlighted</span> text inside section 2.</p>
</div>
</div>
</body>
</html>
এখানে:
.containerক্লাসে পুরো পেজের কাঠামো তৈরি করা হয়েছে।.sectionক্লাস দিয়ে প্রতিটি সেকশন স্টাইল করা হয়েছে।.highlightক্লাস দিয়ে স্প্যান ট্যাগের মধ্যে টেক্সটকে বিশেষভাবে হাইলাইট করা হয়েছে।
৪. ডিভ এবং স্প্যান স্টাইলিংয়ের জন্য কিছু গুরুত্বপূর্ণ নির্দেশনা
৪.1 CSS ক্লাস এবং আইডি ব্যবহারের সুবিধা
- ক্লাস (Class): একই ধরনের একাধিক উপাদানকে একসাথে স্টাইল করতে
classব্যবহার করা হয়। একাধিক ট্যাগে একই ক্লাস প্রয়োগ করা যেতে পারে। - আইডি (ID):
idশুধুমাত্র একক উপাদানের জন্য ব্যবহৃত হয় এবং এটি পেজের একটি নির্দিষ্ট ট্যাগের জন্য স্টাইল প্রয়োগের উপযুক্ত।
৪.2 ইনলাইন CSS ব্যবহার না করা
XHTML ডকুমেন্টে style অ্যাট্রিবিউট দিয়ে ইনলাইন CSS ব্যবহার এড়িয়ে চলা উচিত। এর পরিবর্তে একটি পৃথক <style> ব্লক বা এক্সটার্নাল CSS ফাইল ব্যবহার করা উচিত।
৪.3 CSS এবং XHTML সামঞ্জস্য
CSS-এর প্রপার্টি এবং কৌশলগুলি XHTML ডকুমেন্টের স্ট্রিক্ট সঠিকতা বজায় রেখে প্রয়োগ করতে হবে, যেমন কেস-সেন্সিটিভ ট্যাগ, বন্ধন সহ ট্যাগ ব্যবহার ইত্যাদি।
XHTML ডকুমেন্টে CSS দিয়ে ডিভ এবং স্প্যান ট্যাগ স্টাইলিং করার মাধ্যমে আপনি ওয়েব পেজের ভিজ্যুয়াল ডিজাইনকে কাস্টমাইজ এবং নিয়ন্ত্রণ করতে পারেন। ডিভ ট্যাগে ব্লক-লেভেল স্টাইলিং করা হয়, যেখানে স্প্যান ট্যাগে ইনলাইন স্টাইলিং প্রয়োগ করা হয়। CSS-এর মাধ্যমে আপনি পেজের উপস্থাপনাকে আরও আকর্ষণীয় এবং ব্যবহারকারীদের জন্য সুবিধাজনক করতে পারবেন।
