ক্যাটাগরি ট্রিগার :

6/recent/ticker-posts

CSS দিয়ে Colors, Fonts, Text Style কিভাবে করা যায়?

July 19, 2025

 


✅ 1. 🎨 Colors in CSS

তুমি CSS-এ রঙ ব্যবহার করতে পারো বিভিন্নভাবে:

🔹 নাম দিয়ে:


h1 {
  color: red;
  background-color: yellow;
}

🔹 Hex Code দিয়ে:


p {
  color: #333333;
  background-color: #f0f0f0;
}

🔹 RGB / RGBA:


div {
  background-color: rgba(0, 0, 0, 0.5); /* অর্ধস্বচ্ছ কালো */
}

✅ 2. 🅰️ Fonts in CSS

🔹 font-family: ফন্ট পরিবর্তনের জন্য


body {
  font-family: Arial, Helvetica, sans-serif;
}

📌 টিপস: সবসময় fallback ফন্ট দিতে হয় (যেমন: Arial, তারপর sans-serif)

🔹 font-size: ফন্টের আকার


p {
  font-size: 18px;
}

একক (unit): px, em, rem, % ইত্যাদি
👉 শুরুতে px ব্যবহার করাই সহজ

🔹 font-weight: মোটা বা পাতলা লেখা


h2 {
  font-weight: bold;
}

মূল মান: normal, bold, lighter, 100 থেকে 900

✅ 3. ✍️ Text Styling

🔹 text-align: টেক্সট কোথায় থাকবে


p {
  text-align: center;
}

অপশন: left, right, center, justify

🔹 text-transform: টেক্সটের বড় ছোট হাতের রূপ


h3 {
  text-transform: uppercase;
}

অপশন: uppercase, lowercase, capitalize

🔹 text-decoration: আন্ডারলাইন, লাইন কাটা


a {
  text-decoration: none;
}

অপশন: underline, overline, line-through, none

🎯 একটি সম্পূর্ণ উদাহরণ:


<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f9f9f9;
      font-family: 'Segoe UI', sans-serif;
      color: #333;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      text-transform: uppercase;
      font-size: 36px;
    }

    p {
      font-size: 18px;
      line-height: 1.6;
      text-align: justify;
    }

    a {
      color: #3498db;
      text-decoration: none;
      font-weight: bold;
    }

    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>আমার ওয়েবসাইট</h1>
  <p>এই প্যারাগ্রাফটি CSS দিয়ে স্টাইল করা হয়েছে। এখানে ফন্ট, রঙ, এবং অ্যালাইনমেন্ট ব্যবহৃত হয়েছে।</p>
  <p><a href="#">আরও জানুন</a></p>
</body>
</html>

আপনার প্রিয়জনের সাথে শেয়ার করুন

আপনার মন্তব্য পোস্ট করুন

0 Comments