অধ্যায় ৮: CSS Font, Text Styling এবং Box Model (বাংলায়)

 

অধ্যায় ৮: 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

Post a Comment

Previous Post Next Post