অধ্যায় ৮: CSS Font, Text Styling এবং Box Model (বাংলায়)
এই অধ্যায়ে আমরা শিখবো কীভাবে CSS দিয়ে টেক্সট স্টাইল করা হয়, ফন্ট কাস্টমাইজ করা যায় এবং কীভাবে Box Model কাজ করে।
১. Font Styling (ফন্ট নিয়ন্ত্রণ)
p {
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
font-style: italic;
}
প্রপার্টি | কাজ |
---|---|
font-family |
কোন ফন্ট ব্যবহার হবে |
font-size |
ফন্টের সাইজ নির্ধারণ |
font-weight |
ফন্ট কতটা মোটা (normal, bold) |
font-style |
italic বা normal |
২. Text Styling (টেক্সটের সাজসজ্জা)
h1 {
color: navy;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
}
প্রপার্টি | কাজ |
---|---|
text-align |
টেক্সট কোথায় থাকবে (left, center, right) |
text-decoration |
underline, overline, none |
text-transform |
টেক্সট বড়/ছোট অক্ষরে রূপান্তর (uppercase, lowercase) |
letter-spacing |
অক্ষরের মাঝে ফাঁকা |
line-height |
লাইনগুলোর উচ্চতা |
৩. CSS Box Model (অত্যন্ত গুরুত্বপূর্ণ)
প্রতিটি HTML এলিমেন্ট মূলত একটি বাক্স বা “Box” হিসেবে কাজ করে। এই Box-কে চারটি অংশে ভাগ করা হয়:
+-------------------------------+
| margin |
| +-----------------------+ |
| | border | |
| | +---------------+ | |
| | | padding | | |
| | | +---------+ | | |
| | | | content | | | |
| | | +---------+ | | |
| | +---------------+ | |
| +-----------------------+ |
+-------------------------------+
অংশ | কাজ |
---|---|
content |
যেখানে টেক্সট/ছবি থাকে |
padding |
content এর চারপাশে ফাঁকা জায়গা |
border |
padding এর চারপাশে সীমানা |
margin |
border এর বাইরের ফাঁকা জায়গা (অন্য এলিমেন্ট থেকে দূরত্ব) |
Box Model উদাহরণ:
.box {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 30px;
}
৪. উদাহরণ সহ HTML কোড:
<!DOCTYPE html>
<html>
<head>
<style>
.text-box {
font-family: 'Verdana';
font-size: 20px;
text-align: center;
text-transform: uppercase;
color: #333;
padding: 20px;
margin: 20px;
border: 2px dashed gray;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="text-box">
CSS Box Model এবং Text Styling
</div>
</body>
</html>
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
কীভাবে ফন্ট ও টেক্সটকে সুন্দরভাবে সাজানো যায়
-
CSS Box Model কী এবং এটি কিভাবে ডিজাইন নিয়ন্ত্রণ করে
পরবর্তী অধ্যায়:
অধ্যায় ৯: CSS Display, Position, Z-index, Overflow