অধ্যায় ৭: CSS - Color, Background, Border, Margin, Padding (বাংলায়)
এই অধ্যায়ে আমরা CSS-এর মাধ্যমে ওয়েবসাইটকে কাস্টমাইজ করবো। রঙ, ব্যাকগ্রাউন্ড, বর্ডার, এবং spacing নিয়ে কাজ শিখবো।
১. CSS Color (রঙ নির্ধারণ)
p {
color: red;
}
রঙের ধরন:
-
নাম দিয়ে:
red,blue,green -
Hex code:
#ff0000 -
RGB:
rgb(255, 0, 0)
h1 {
color: #00ff00; /* সবুজ */
}
২. Background (ব্যাকগ্রাউন্ড ডিজাইন)
body {
background-color: lightblue;
}
ছবি ব্যাকগ্রাউন্ড হিসেবে:
body {
background-image: url("background.jpg");
background-size: cover;
background-repeat: no-repeat;
}
৩. Border (বর্ডার তৈরি)
p {
border: 2px solid black;
}
| অংশ | ব্যাখ্যা |
|---|---|
2px |
বর্ডারের পুরুত্ব |
solid |
বর্ডারের ধরন (solid, dashed, dotted) |
black |
বর্ডারের রঙ |
বর্ডার রাউন্ড করার জন্য:
div {
border: 1px solid gray;
border-radius: 10px;
}
৪. Margin (বাইরের ফাঁকা জায়গা)
h1 {
margin: 20px;
}
আলাদা করে চার দিক নির্ধারণ:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
৫. Padding (ভেতরের ফাঁকা জায়গা)
div {
padding: 20px;
}
চার দিক আলাদা করতেও পারেন:
padding: 10px 15px 10px 15px; /* top, right, bottom, left */
পূর্ণ উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
}
.card {
background-color: white;
border: 2px solid #ddd;
border-radius: 10px;
padding: 20px;
margin: 30px;
color: #333;
}
</style>
</head>
<body>
<div class="card">
<h2>আমার CSS স্টাইলড ডিভ</h2>
<p>এখানে আমরা ব্যাকগ্রাউন্ড, বর্ডার, মার্জিন, প্যাডিং প্রয়োগ করেছি।</p>
</div>
</body>
</html>
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
কীভাবে রঙ ও ব্যাকগ্রাউন্ড নিয়ন্ত্রণ করতে হয়
-
কীভাবে বর্ডার, মার্জিন ও প্যাডিং ব্যবহার করে ডিজাইন সাজানো যায়
-
একটি সুন্দর ডিজাইনড ব্লক তৈরি করা যায়
পরবর্তী অধ্যায়:
অধ্যায় ৮: CSS Font, Text Styling, Box Model