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

CSS এর হাতেখড়ি — পর্ব ১: CSS পরিচিতি ও Selector।

আমাদের HTML সিরিজ শেষ হয়েছে ১০ পর্বে, যেখানে আমরা শিখেছি ওয়েবপেজের কাঠামো কীভাবে বানাতে হয়। কিন্তু সেই পেজগুলো ছিল একদম সাদামাটা — কোনো রঙ, ফন্ট, স্পেসিং, বা সুন্দর লেআউট ছিল না। আজ থেকে আমরা শুরু করছি নতুন সিরিজ — CSS এর হাতেখড়ি, যেখানে আমরা শিখবো কীভাবে একটা সাদামাটা HTML পেজকে সুন্দর, রঙিন, এবং প্রফেশনাল দেখানো যায়।

CSS কী?

CSS মানে Cascading Style Sheets। HTML যদি একটা বাড়ির কাঠামো (ইট, দেয়াল, ছাদ) হয়, তাহলে CSS হলো সেই বাড়ির রঙ, টাইলস, পর্দা, আসবাবপত্রের সাজসজ্জা — মানে যা কিছু দেখতে সুন্দর লাগায়।

CSS দিয়ে আমরা নিয়ন্ত্রণ করতে পারি:

রঙ ও ব্যাকগ্রাউন্ড
ফন্ট ও টেক্সট স্টাইল
স্পেসিং (margin, padding)
লেআউট (এলিমেন্ট কোথায় বসবে)
অ্যানিমেশন ও ইফেক্ট

CSS-এর বেসিক সিনট্যাক্স

CSS লেখার নিয়ম খুবই সহজ — একটা selector দিয়ে বলা হয় কোন এলিমেন্টে স্টাইল দেওয়া হবে, তারপর কার্লি ব্র্যাকেটের ভেতরে property ও তার value লেখা হয়:

selector {
  property: value;
  property: value;
}

একটা বাস্তব উদাহরণ:

p {
  color: blue;
  font-size: 18px;
}

এটার মানে: পেজের সব <p> ট্যাগের টেক্সট নীল রঙের হবে এবং সাইজ ১৮ পিক্সেল হবে। প্রতিটা property-value জোড়ার শেষে সেমিকোলন (;) দিতে হয় — এটা ভুলে যাওয়া beginner-দের সবচেয়ে কমন ভুল।

CSS যুক্ত করার ৩টা পদ্ধতি

HTML-এ CSS তিনভাবে যুক্ত করা যায়। প্রতিটার নিজস্ব ব্যবহার-ক্ষেত্র আছে।

১. Inline CSS

সরাসরি HTML ট্যাগের style অ্যাট্রিবিউটে লেখা হয়:

<p style="color: red; font-size: 20px;">এটা লাল টেক্সট</p>

এটা শুধু একটা নির্দিষ্ট এলিমেন্টে কাজ করে। সহজ হলেও এটা সবচেয়ে কম ব্যবহারযোগ্য পদ্ধতি, কারণ পুরো পেজে বারবার একই style লিখতে হয়, আর কোড maintain করা কঠিন হয়ে যায়।

২. Internal CSS

<head>-এর ভেতরে <style> ট্যাগ দিয়ে লেখা হয়, পুরো পেজের জন্য একসাথে:

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

এটা তখন ভালো, যখন CSS শুধু একটা নির্দিষ্ট পেজের জন্যই দরকার — অন্য কোনো পেজে শেয়ার করার দরকার নেই।

৩. External CSS (সবচেয়ে ভালো পদ্ধতি)

একটা আলাদা .css ফাইলে CSS লিখে, HTML থেকে সেটাকে লিংক করা হয়:

<!-- style.css ফাইলে -->
p {
  color: red;
  font-size: 20px;
}

<!-- index.html ফাইলে, head এর ভেতরে -->
<link rel="stylesheet" href="style.css">

টিপস: Production-level ওয়েবসাইটে সবসময় External CSS ব্যবহার করা উচিত। এতে একটা CSS ফাইল দিয়ে পুরো ওয়েবসাইটের সব পেজ স্টাইল করা যায়, কোড পরিষ্কার থাকে, এবং ব্রাউজার CSS ফাইলটা cache করে রাখে বলে পেজ দ্রুত লোড হয়।

Selector — কোন এলিমেন্টে স্টাইল যাবে

Selector দিয়ে বলা হয় CSS কোন এলিমেন্টকে টার্গেট করবে। কয়েকটা গুরুত্বপূর্ণ ধরনের selector দেখি।

Element Selector

ট্যাগের নাম দিয়ে সরাসরি সিলেক্ট করা হয় — পেজের সব সেই ট্যাগে প্রভাব পড়ে:

h1 {
  color: darkblue;
}

Class Selector

HTML-এর class অ্যাট্রিবিউট ব্যবহার করে সিলেক্ট করা হয়, শুরুতে টেলা (.) বসিয়ে। একই class একাধিক এলিমেন্টে ব্যবহার করা যায়:

<p class="highlight">এটা হাইলাইট করা</p>
<p class="highlight">এটাও হাইলাইট করা</p>

.highlight {
  background-color: yellow;
}

ID Selector

HTML-এর id অ্যাট্রিবিউট ব্যবহার করে সিলেক্ট করা হয়, শুরুতে হ্যাশ (#) বসিয়ে। মনে আছে তো — একটা পেজে id একবারই ব্যবহার করা যায় (HTML পর্ব ৮-এ শেখা হয়েছিল):

<div id="header">হেডার</div>

#header {
  background-color: black;
  color: white;
}

টিপস: সাধারণ নিয়ম — বেশিরভাগ স্টাইলিং class দিয়ে করো, কারণ একই স্টাইল অনেক জায়গায় লাগে। id selector খুব কম ব্যবহার করো, কারণ এর priority অনেক বেশি এবং এটা পরে override করা কঠিন হয়ে যায়।

Group Selector

একাধিক selector-এ একই স্টাইল দিতে চাইলে কমা দিয়ে আলাদা করে একসাথে লেখা যায়:

h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: darkblue;
}

এটা না লিখলে তিনবার আলাদা আলাদা করে একই CSS লিখতে হতো — group selector দিয়ে কোড অনেক ছোট ও পরিষ্কার হয়।

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

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>CSS পরিচিতি</title>
  <style>
    h1 {
      color: darkblue;
    }

    .highlight {
      background-color: yellow;
    }

    #footer-text {
      color: gray;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>আমার প্রথম CSS পেজ</h1>
  <p class="highlight">এই লাইনটা হলুদ ব্যাকগ্রাউন্ড পাবে।</p>
  <p id="footer-text">এই লাইনটা ধূসর রঙের হবে।</p>
</body>
</html>

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

Exercise:

HTML পর্ব ১০-এর ল্যান্ডিং পেজটা খোলো (অথবা নতুন একটা ফাইল বানাও)
<head>-এর ভেতরে একটা <style> ট্যাগ বসাও
সব h1, h2-কে একটা group selector দিয়ে রঙ পরিবর্তন করো
যেকোনো একটা প্যারাগ্রাফে class দিয়ে ব্যাকগ্রাউন্ড কালার দাও

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

পর্ব ২-এ আমরা শিখবো Color, Background ও Text/Font styling — কীভাবে টেক্সট আর ব্যাকগ্রাউন্ডকে সুন্দর করে সাজানো যায়, উদাহরণসহ।

প্রশ্ন থাকলে কমেন্টে জানাতে পারো।

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

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

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

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

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

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