অধ্যায় ৬: CSS পরিচিতি ও Syntax (বাংলায়)
এখন আপনি শিখবেন কীভাবে ওয়েবসাইটকে সুন্দর, আকর্ষণীয় ও ডিজাইনসম্মত করা যায় CSS দিয়ে।
CSS কী?
CSS এর পুরো নাম Cascading Style Sheets।
এটি HTML এর সাথে ব্যবহার করে ওয়েবসাইটের রঙ, ফন্ট, সাইজ, লে-আউট ইত্যাদি নিয়ন্ত্রণ করা হয়।
HTML শুধু কাঠামো দেয়, আর CSS দেয় রূপ ও সৌন্দর্য।
CSS ব্যবহার করার ৩টি উপায়
| উপায় | ব্যাখ্যা |
|---|---|
| Inline CSS | সরাসরি HTML ট্যাগে style অ্যাট্রিবিউটে |
| Internal CSS | <style> ট্যাগের মধ্যে (HTML ফাইলের head অংশে) |
| External CSS | আলাদা .css ফাইল থেকে লিংক করে |
১. Inline CSS উদাহরণ:
<p style="color: red; font-size: 20px;">আমি লাল রঙের টেক্সট।</p>
২. Internal CSS উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>স্বাগতম!</h1>
</body>
</html>
৩. External CSS উদাহরণ:
style.css ফাইল:
body {
background-color: #f2f2f2;
font-family: Arial;
}
h1 {
color: green;
}
HTML ফাইলে যুক্ত করা:
<head>
<link rel="stylesheet" href="style.css">
</head>
CSS Syntax (গঠন):
selector {
property: value;
property: value;
}
উদাহরণ:
p {
color: red;
font-size: 18px;
}
-
p= কোন ট্যাগে স্টাইল হবে (সিলেক্টর) -
color: red;= কালার হবে লাল -
font-size: 18px;= ফন্ট সাইজ ১৮ পিক্সেল
কিছু সাধারণ CSS Property:
| Property | কাজ |
|---|---|
color |
টেক্সটের রঙ |
background-color |
ব্যাকগ্রাউন্ড রঙ |
font-size |
ফন্টের সাইজ |
text-align |
টেক্সট কোথায় থাকবে (left, center, right) |
margin |
বাহিরের ফাঁকা জায়গা |
padding |
ভেতরের ফাঁকা জায়গা |
border |
বর্ডার দেওয়া |
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
CSS কী এবং কেন দরকার
-
CSS লেখার নিয়ম ও উপায়
-
বিভিন্নভাবে HTML-এ CSS প্রয়োগ
পরবর্তী অধ্যায়:
অধ্যায় ৭: CSS Color, Background, Border, Margin, Padding
লিখুন: “অধ্যায় ৭ শুরু করো” — তাহলে আমরা CSS-এর মাধ্যমে কীভাবে ডিজাইন আরও সুন্দর করা যায় তা শিখবো।