XHTML ডকুমেন্টের সাথে CSS (Cascading Style Sheets) ইন্টিগ্রেশন করার মাধ্যমে আপনি ওয়েব পেজের ডিজাইন এবং লেআউট উন্নত করতে পারেন। XHTML স্ট্রাকচার এবং CSS ডিজাইন আলাদা হলেও একে অপরের সাথে সুসংগতভাবে কাজ করে, যাতে HTML কনটেন্টকে সুন্দরভাবে প্রদর্শন করা যায়। এই টিউটোরিয়ালে আমরা XHTML ডকুমেন্টে বেসিক CSS এর সাথে ইন্টিগ্রেশন কিভাবে করবেন তা দেখাবো।
১. CSS এবং XHTML ইন্টিগ্রেশন
XHTML ডকুমেন্টে CSS ইন্টিগ্রেট করার জন্য দুটি প্রধান উপায় আছে:
১.1 ইনলাইন CSS
ইনলাইন CSS হচ্ছে যখন আপনি সরাসরি HTML (বা XHTML) ট্যাগে style অ্যাট্রিবিউট ব্যবহার করে স্টাইল প্রযোজ্য করেন। এটি ছোট এবং দ্রুত পরিবর্তনের জন্য উপযোগী।
<p style="color: blue; font-size: 18px;">এই টেক্সটটি নীল এবং বড় আকারে প্রদর্শিত হবে।</p>
১.2 অভ্যন্তরীণ CSS (Internal CSS)
অভ্যন্তরীণ CSS হল যখন আপনি <style> ট্যাগ ব্যবহার করে ডকুমেন্টের <head> সেকশনে CSS কোড লেখেন। এটি একাধিক ট্যাগের জন্য একই স্টাইল প্রযোজ্য করতে সুবিধাজনক।
<head>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: darkblue;
}
</style>
</head>
১.3 বাহ্যিক CSS (External CSS)
বাহ্যিক CSS হল যখন আপনি আলাদা একটি .css ফাইল তৈরি করে সেটি আপনার XHTML ডকুমেন্টে লিঙ্ক করেন। এটি বড় এবং স্কেলেবল প্রজেক্টে বেশি ব্যবহৃত হয় কারণ এতে কোডের পুনরাবৃত্তি কমে এবং পেজ লোডিং টাইমও উন্নত হয়।
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
এখানে styles.css ফাইলটি আলাদা ফোল্ডারে সংরক্ষিত থাকবে এবং এতে সমস্ত স্টাইল সংজ্ঞায়িত থাকবে।
২. বেসিক CSS স্টাইলিং উদাহরণ
এখন আমরা কিছু সাধারণ CSS স্টাইলিং ব্যবহার করে XHTML ডকুমেন্টে বিভিন্ন উপাদান সাজানোর একটি উদাহরণ দেখব।
<!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>এক্সএইচটিএমএল এবং CSS উদাহরণ</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
h1 {
color: #4CAF50;
text-align: center;
padding: 20px;
}
p {
color: #333;
font-size: 16px;
line-height: 1.6;
padding: 0 20px;
}
.highlight {
background-color: yellow;
}
a {
color: #4CAF50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>এক্সএইচটিএমএল এবং CSS উদাহরণ</h1>
<p>এটি একটি উদাহরণ প্যারাগ্রাফ। আপনি এখানে <span class="highlight">CSS</span> এর ব্যবহার দেখতে পাচ্ছেন।</p>
<p>অন্য একটি <a href="#">লিঙ্ক</a> এখানে আছে।</p>
</body>
</html>
৩. বেসিক CSS প্রপার্টি এবং সিলেক্টর
৩.1 টেক্সট স্টাইলিং
color: টেক্সটের রঙ নির্ধারণ করে।font-family: ফন্টের ধরনের নির্বাচন করে।font-size: টেক্সটের আকার নির্ধারণ করে।line-height: লাইনের মধ্যে ব্যবধান বৃদ্ধি করে।
৩.2 বক্স মডেল
বক্স মডেল হল যেকোনো HTML উপাদান (যেমন প্যারাগ্রাফ বা চিত্র) চারটি অংশে বিভক্ত হয়:
padding: উপাদানের ভিতরের মার্জিন।border: উপাদানের চারপাশে সীমানা।margin: উপাদানের বাইরের ব্যবধান।
p {
margin: 20px;
padding: 10px;
border: 1px solid #ddd;
}
৩.3 পটভূমি এবং রঙ
background-color: উপাদানের পটভূমি রঙ।background-image: উপাদানের পটভূমিতে ছবি ব্যবহার।
body {
background-color: #f0f0f0;
}
h1 {
background-image: url('header-bg.jpg');
color: white;
}
৪. বাহ্যিক CSS ফাইল ব্যবহার
বাহ্যিক CSS ফাইল ব্যবহার করা সবচেয়ে ভালো পদ্ধতি যখন আপনার সাইটে একাধিক পেজ থাকে এবং আপনি স্টাইলগুলি পুনরায় ব্যবহার করতে চান।
৪.1 CSS ফাইল তৈরি করা
আপনি styles.css নামের একটি ফাইল তৈরি করুন এবং CSS কোড সেখানে লিখুন:
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: #333;
font-size: 16px;
}
৪.2 XHTML ডকুমেন্টে লিঙ্ক করা
এখন, XHTML ডকুমেন্টের <head> সেকশনে এই বাহ্যিক CSS ফাইলটি লিঙ্ক করুন:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
এটি HTML অথবা XHTML ডকুমেন্টের স্টাইল সঠিকভাবে এক্সটার্নাল ফাইলে লিঙ্ক করবে এবং ওয়েব পেজের সমস্ত ট্যাগে প্রযোজ্য করবে।
৫. উপসংহার
XHTML ডকুমেন্টে CSS ইন্টিগ্রেশন আপনাকে ডিজাইন এবং লেআউট কাস্টমাইজ করতে সহায়তা করে। আপনি ইনলাইন, অভ্যন্তরীণ, বা বাহ্যিক CSS ব্যবহার করে আপনার ওয়েব পেজের স্টাইলিং করতে পারেন। বাহ্যিক CSS ফাইল ব্যবহারের মাধ্যমে বড় প্রজেক্টে কোডের পুনরাবৃত্তি কমিয়ে আপনি ডিজাইনকে আরও বেশি স্কেলেবল এবং মেনটেনেবল করতে পারবেন। CSS এর মাধ্যমে আপনি HTML বা XHTML ডকুমেন্টের কনটেন্টকে আরো আকর্ষণীয় এবং ব্যবহারকারী বান্ধব করে তুলতে পারেন।
Read more
