CSS এর হাতেখড়ি (পর্ব

আগের পর্বে আমরা শিখেছি CSS যুক্ত করার তিনটা পদ্ধতি আর কয়েক ধরনের selector। আজকে শিখবো রঙ, ব্যাকগ্রাউন্ড, আর টেক্সট/ফন্ট স্টাইলিং — এগুলো দিয়েই একটা পেজ প্রথমবার সত্যিকারের "সুন্দর" দেখানো শুরু করে।

রঙ দেওয়ার বিভিন্ন উপায়

CSS-এ রঙ কয়েকভাবে লেখা যায়:

p {
  color: red;                 /* নাম দিয়ে */
  color: #ff0000;             /* হেক্স কোড */
  color: rgb(255, 0, 0);      /* RGB */
  color: rgba(255, 0, 0, 0.5);/* RGB + স্বচ্ছতা (opacity) */
}

পদ্ধতি	কখন ব্যবহার হয়
নাম (`red`, `blue`)	দ্রুত টেস্ট বা শেখার সময়, সীমিত রঙ পাওয়া যায়
Hex (`#ff0000`)	সবচেয়ে বেশি ব্যবহৃত — ডিজাইন টুল থেকে সরাসরি কপি করা যায়
`rgba()`	যখন স্বচ্ছতা (transparency) দরকার হয়

টিপস: rgba()-এর শেষ মানটা (alpha) ০ থেকে ১-এর মধ্যে হয় — ০ মানে সম্পূর্ণ স্বচ্ছ (অদৃশ্য), ১ মানে সম্পূর্ণ অস্বচ্ছ।

Background Properties

এলিমেন্টের পেছনের ব্যাকগ্রাউন্ড কন্ট্রোল করতে কয়েকটা গুরুত্বপূর্ণ property আছে:

div {
  background-color: lightblue;
  background-image: url("bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Property	কাজ
`background-color`	সলিড রঙ
`background-image`	ব্যাকগ্রাউন্ড ছবি
`background-size`	ছবি কীভাবে ফিট হবে (`cover`, `contain`)
`background-repeat`	ছবি বারবার রিপিট হবে কিনা
`background-position`	ছবি কোথায় বসবে

Gradient Background

সলিড রঙের বদলে একটা রঙ থেকে আরেকটা রঙে ধীরে ধীরে পরিবর্তন (gradient) দেখাতে linear-gradient() ব্যবহার হয়:

div {
  background: linear-gradient(to right, #ff512f, #dd2476);
}

এইরকম দেখাবে একটা gradient ব্যাকগ্রাউন্ড

to right দিয়ে বলা হয়েছে রঙ বাম থেকে ডানে পরিবর্তন হবে। to bottom, 45deg ইত্যাদি দিয়ে দিক পরিবর্তন করা যায়।

Font Properties

টেক্সট কেমন দেখাবে তা নিয়ন্ত্রণ করতে এই property গুলো লাগে:

p {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
}

Property	কাজ
`font-family`	কোন ফন্ট ব্যবহার হবে (কমা দিয়ে fallback দেওয়া হয়)
`font-size`	টেক্সটের আকার
`font-weight`	কতটা বোল্ড (`normal`, `bold`, বা ১০০-৯০০ নাম্বার)
`font-style`	ইটালিক হবে কিনা

টিপস: font-family-তে সবসময় শেষে একটা generic ফন্ট (sans-serif, serif) দাও fallback হিসেবে — যদি প্রথম ফন্টটা ইউজারের ডিভাইসে না থাকে, তাহলে ব্রাউজার এটা ব্যবহার করবে।

Text Properties

p {
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  line-height: 1.8;
  letter-spacing: 1px;
}

Property	কাজ
`text-align`	টেক্সট বাম/ডান/মাঝখানে/justify
`text-decoration`	আন্ডারলাইন, লাইন-থ্রু, বা কোনোটাই না
`text-transform`	বড় হাতের/ছোট হাতের অক্ষরে রূপান্তর
`line-height`	দুই লাইনের মধ্যে দূরত্ব
`letter-spacing`	অক্ষরের মধ্যে দূরত্ব

টিপস: line-height খুব ছোট থাকলে লেখা গাদাগাদি লাগে, পড়তে কষ্ট হয়। প্যারাগ্রাফের জন্য সাধারণত ১.৫-১.৮ ভালো একটা মান।

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

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Color ও Font উদাহরণ</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f5f5f5;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
    }

    .banner {
      background: linear-gradient(to right, #ff512f, #dd2476);
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 8px;
    }

    p {
      line-height: 1.8;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>আমার ব্লগ</h1>
  <div class="banner">স্বাগতম!</div>
  <p>এটা একটা সুন্দর প্যারাগ্রাফ।</p>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

একটা h1-এর রঙ hex code দিয়ে বদলাও
একটা div-এ gradient ব্যাকগ্রাউন্ড দাও
একটা প্যারাগ্রাফের font-family, line-height ও text-align পরিবর্তন করো

পরের পর্বে যা থাকছে

পর্ব ৩-এ আমরা শিখবো Box Model — content, padding, border, margin, width/height, ও box-sizing, উদাহরণসহ।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ

CSS এর হাতেখড়ি (পর্ব – ২)