সিএসএস পরিচিতি (CSS Introduction)

একটি গল্প দিয়ে শুরু করি

ঢাকার পুরান ঢাকায় দুটো বাড়ি পাশাপাশি। দুটো বাড়ির কাঠামো (structure) হুবহু একই — একই ইট, একই সিমেন্ট, একই ছাদ। কিন্তু একটা বাড়ি দেখতে সাদামাটা — সাদা রঙ, কোনো সজ্জা নেই। আরেকটা বাড়ি দেখতে অসাধারণ — উজ্জ্বল রঙ, সুন্দর দরজা-জানালা, ফুলের বাগান।

পার্থক্য কোথায়? কাঠামোতে নয় — সাজসজ্জায় (decoration)!

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

সমস্যাটা কী ছিল CSS ছাড়া?

CSS আসার আগে HTML-এই সব styling করতে হত। দেখো কেমন কুৎসিত ছিল:

<!-- CSS ছাড়া পুরনো পদ্ধতি -->
<font color="red" size="5" face="Arial">
  বাংলাদেশ ক্রিকেট দল
</font>
<center>
  <b><i>আমাদের টাইগাররা</i></b>
</center>

সমস্যা:

প্রতিটি element-এ আলাদা করে style লিখতে হত
১০০টি পেজে একটু পরিবর্তন মানে ১০০ জায়গায় বদলাতে হত
HTML ও design একসাথে মিশে গেলে কোড বোঝা কঠিন হত

সমাধান: CSS — HTML থেকে design আলাদা রাখো!

ভিজ্যুয়াল মডেল (ASCII Diagram)

CSS এর কাজ:

HTML (কাঠামো)          CSS (সাজসজ্জা)
┌─────────────┐         ┌──────────────────┐
│ <h1>শিরোনাম│ + CSS → │ color: red;      │
│ <p>অনুচ্ছেদ│         │ font-size: 20px; │
│ <button>    │         │ background: blue;│
└─────────────┘         └──────────────────┘
                                │
                                ▼
                ┌─────────────────────────────┐
                │  Browser-এ দেখা যায়:       │
                │                             │
                │  [লাল রঙে বড় শিরোনাম]     │
                │  [নীল background-এ button]  │
                │                             │
                └─────────────────────────────┘

মানসিক মডেল (Mental Model)

HTML + CSS = বাড়ি তৈরি

HTML                    CSS
├── <h1>                ├── রঙ (color)
│   (শিরোনামের ঘর)     ├── আকার (font-size)
├── <p>                 ├── ব্যবধান (margin/padding)
│   (অনুচ্ছেদের ঘর)   ├── সীমানা (border)
├── <button>            └── পটভূমি (background)
│   (বোতামের ঘর)
└── ...

HTML = ইট, সিমেন্ট (structure)
CSS = রঙ, সজ্জা, আলো (presentation)

মূল ধারণা (Formal Concept)

CSS (Cascading Style Sheets) হলো একটি stylesheet language যা HTML document-এর উপস্থাপনা (রঙ, আকার, ব্যবধান, অবস্থান) নির্ধারণ করে।

Cascading (ধাপক্রমিক): একাধিক জায়গায় style থাকলে নির্দিষ্ট নিয়মে একটি প্রাধান্য পায়
Style Sheets: স্টাইলের নির্দেশিকার তালিকা
আলাদা রাখার নীতি (Separation of Concerns): HTML-এ কাঠামো, CSS-এ নকশা

Module 1: CSS-এর সিনট্যাক্স (Syntax — লেখার নিয়ম)

selector {
    property: value;
    property: value;
}

h1 {
    color: red;
    font-size: 36px;
}

বিশ্লেষণ:

অংশ	অর্থ	উদাহরণ
Selector (নির্বাচক)	কোন element-এ style দেব	`h1`, `p`, `.class`, `#id`
Property (বৈশিষ্ট্য)	কী পরিবর্তন করব	`color`, `font-size`, `background`
Value (মান)	কতটুকু বা কী রঙে	`red`, `36px`, `#FF0000`
`{ }`	Declaration block	সব declaration এর মধ্যে
`:`	Property ও value আলাদা করে	`color: red`
`;`	প্রতিটি declaration শেষে	`font-size: 36px;`

/* উদাহরণ: ক্রিকেট পেজের শিরোনাম */
h1 {
    color: green;        /* বাংলাদেশের সবুজ রঙ */
    font-size: 40px;     /* বড় শিরোনাম */
    text-align: center;  /* মাঝখানে */
}

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

পদ্ধতি ১: Inline CSS (ইনলাইন — একই লাইনে)

HTML element-এর style attribute-এ সরাসরি লেখা:

<h1 style="color: green; font-size: 36px;">বাংলাদেশ ক্রিকেট</h1>
<p style="color: red; background-color: yellow;">গুরুত্বপূর্ণ বার্তা</p>

বৈশিষ্ট্য:

সহজ, দ্রুত পরীক্ষা করতে পারা যায়
শুধু ওই একটি element-এ কাজ করে
অনেক element থাকলে পুনরাবৃত্তি হয়
Code বোঝা কঠিন হয়

পদ্ধতি ২: Internal CSS (ইন্টার্নাল — পেজের ভেতরে)

<head> section-এ <style> ট্যাগের ভেতরে লেখা:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>bKash Tutorial</title>
  <style>
    body {
      background-color: #E2136E; /* bKash-এর গোলাপি রঙ */
      font-family: Arial, sans-serif;
    }
    h1 {
      color: white;
      text-align: center;
    }
    p {
      color: #333333;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>bKash ব্যবহার গাইড</h1>
  <p>এই পেজে আপনি শিখবেন কীভাবে bKash ব্যবহার করতে হয়।</p>
</body>
</html>

বৈশিষ্ট্য:

শুধু ওই একটি HTML ফাইলে কাজ করে
একই style একাধিক element-এ দেওয়া যায়
একাধিক পেজে একই style চাইলে প্রতিটিতে আলাদা লিখতে হয়

পদ্ধতি ৩: External CSS (এক্সটার্নাল — আলাদা ফাইলে) ⭐ সেরা পদ্ধতি

আলাদা .css ফাইল তৈরি করে HTML-এ link করা:

style.css ফাইল:

/* style.css */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

h1 {
    color: #006633;   /* বাংলাদেশের সবুজ */
    text-align: center;
    font-size: 2em;
}

p {
    color: #333333;
    line-height: 1.6;
    margin: 10px 20px;
}

button {
    background-color: #E2136E;  /* bKash গোলাপি */
    color: white;
    padding: 10px 20px;
    border: none;
}

HTML ফাইলে link করা:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>আমার পেজ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>বাংলাদেশ</h1>
  <p>আমাদের সুন্দর দেশ।</p>
  <button>আরো জানুন</button>
</body>
</html>

বৈশিষ্ট্য:

একটি CSS ফাইল শত শত HTML পেজে ব্যবহার করা যায়
ডিজাইন পরিবর্তন করলে সব পেজ একসাথে বদলায়
HTML ও CSS আলাদা থাকায় কোড পরিষ্কার থাকে
পেশাদার ওয়েব ডিজাইনে এটাই মান্য পদ্ধতি

তিন পদ্ধতির তুলনা

বিষয়	Inline	Internal	External
কোথায় লেখা	element-এ	`<head>`-এ	আলাদা ফাইলে
কতটুকু কাজ করে	শুধু ১টি element	১টি পেজে	সব পেজে
পুনরাবৃত্তি	বেশি	মাঝারি	নেই
রক্ষণাবেক্ষণ	কঠিন	মাঝারি	সহজ
পেশাদার ব্যবহার	না	কখনো কখনো	হ্যাঁ
প্রাধান্য (Specificity)	সর্বোচ্চ	মাঝামাঝি	সর্বনিম্ন

Module 3: Selectors (নির্বাচক) — কাকে style দেব

3.1 Element Selector (উপাদান নির্বাচক)

/* সব h1 element-এ style দেয় */
h1 {
    color: darkgreen;
}

/* সব p element-এ style দেয় */
p {
    font-size: 16px;
}

3.2 Class Selector (শ্রেণি নির্বাচক) — `.` দিয়ে

<!-- HTML-এ class দাও -->
<p class="important">এটি গুরুত্বপূর্ণ বার্তা।</p>
<p class="important">এটিও গুরুত্বপূর্ণ।</p>
<p>এটি সাধারণ বার্তা।</p>

/* CSS-এ .className দিয়ে select করো */
.important {
    color: red;
    font-weight: bold;
}

একই class একাধিক element-এ ব্যবহার করা যায়।

3.3 ID Selector (পরিচয় নির্বাচক) — `#` দিয়ে

<!-- HTML-এ id দাও (পেজে একবারই ব্যবহার করতে হয়) -->
<h1 id="main-title">বাংলাদেশ ক্রিকেট</h1>

/* CSS-এ #idName দিয়ে select করো */
#main-title {
    color: green;
    font-size: 48px;
    text-decoration: underline;
}

📝 গুরুত্বপূর্ণ পার্থক্য:

class — একাধিক element-এ ব্যবহার করা যায়, . দিয়ে select
id — একটি পেজে একটিমাত্র element-এ ব্যবহার, # দিয়ে select

Module 4: সাধারণ Properties (বৈশিষ্ট্যসমূহ)

4.1 রঙ সম্পর্কিত

p {
    color: red;                /* লেখার রঙ — নাম দিয়ে */
    color: #FF0000;            /* লেখার রঙ — HEX code দিয়ে */
    color: rgb(255, 0, 0);     /* লেখার রঙ — RGB দিয়ে */
    background-color: yellow;  /* পটভূমির রঙ */
}

রঙ দেওয়ার পদ্ধতি	উদাহরণ	বিশেষত্ব
নাম	`red`, `blue`, `green`	সহজ, সীমিত রঙ
HEX Code	`#FF0000`, `#006633`	সব রঙ সম্ভব
RGB	`rgb(255, 0, 0)`	Red, Green, Blue মিশিয়ে

4.2 লেখা (Typography) সম্পর্কিত

h1 {
    font-size: 36px;              /* লেখার আকার */
    font-family: Arial, sans-serif; /* লেখার ধরন (font) */
    font-weight: bold;            /* মোটা লেখা */
    font-style: italic;           /* বাঁকা লেখা */
    text-align: center;           /* মাঝখানে/বামে/ডানে */
    text-decoration: underline;   /* আন্ডারলাইন */
    line-height: 1.5;             /* লাইনের উচ্চতা */
}

4.3 আকার (Box Model) সম্পর্কিত

div {
    width: 300px;     /* প্রস্থ */
    height: 200px;    /* উচ্চতা */
    margin: 20px;     /* বাইরের ব্যবধান */
    padding: 15px;    /* ভেতরের ব্যবধান */
    border: 2px solid black; /* সীমানা রেখা */
}

CSS Box Model বোঝার চিত্র:
┌─────────────────────────────────────┐
│           margin (বাইরে)            │
│  ┌───────────────────────────────┐  │
│  │        border (সীমানা)        │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │     padding (ভেতরে)     │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │   content (বিষয়)  │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

4.4 সীমানা (Border) সম্পর্কিত

.box {
    border: 2px solid red;      /* পুরুত্ব শৈলী রঙ */
    border-radius: 10px;         /* গোলাকার কোণা */
    border-top: 3px dashed blue; /* শুধু উপরের সীমানা */
}

Border শৈলী:

মান	চেহারা
`solid`	একটানা রেখা —
`dashed`	ড্যাশ রেখা - - -
`dotted`	বিন্দু রেখা . . .
`double`	দ্বৈত রেখা =
`none`	কোনো সীমানা নেই

Module 5: Cascade ও Specificity — কোন CSS জিতবে

একাধিক rule একই element-এ conflict করলে কে জিতবে?

/* Specificity কম */
p { color: blue; }

/* Specificity বেশি */
.intro { color: green; }

/* Specificity সবচেয়ে বেশি */
#main-text { color: red; }

<p id="main-text" class="intro">এই লেখা কী রঙের হবে?</p>

উত্তর: লাল — কারণ ID Selector-এর Specificity সবচেয়ে বেশি।

Specificity ক্রম (কম → বেশি):
Element  <  Class  <  ID  <  Inline
(p, h1)    (.cls)   (#id)   (style="")

Module 6: Before vs After — CSS-এর শক্তি

CSS ছাড়া HTML পেজ:

<h1>বাংলাদেশ ক্রিকেট</h1>
<p>বাংলাদেশ দলের সাম্প্রতিক ফলাফল দেখুন।</p>
<button>বিস্তারিত</button>

[স্ক্রিনে দেখা যায়]:
বাংলাদেশ ক্রিকেট            ← সাদামাটা কালো লেখা
বাংলাদেশ দলের সাম্প্রতিক...  ← সাধারণ paragraph
[বিস্তারিত]                   ← সাদামাটা বোতাম

CSS যুক্ত করার পর:

body { background-color: #003311; font-family: Arial; }
h1   { color: #FFD700; text-align: center; font-size: 3em; }
p    { color: #CCFFCC; font-size: 1.2em; margin: 20px; }
button {
    background-color: #FFD700;
    color: #003311;
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-size: 1.1em;
}

[স্ক্রিনে দেখা যায়]:
┌────────────────────────────────────┐
│        বাংলাদেশ ক্রিকেট           │  ← সোনালি রঙে বড়
│  বাংলাদেশ দলের সাম্প্রতিক...     │  ← হালকা সবুজ লেখা
│       ╔══════════════╗             │
│       ║  বিস্তারিত  ║             │  ← সোনালি গোলাকার বোতাম
│       ╚══════════════╝             │
└────────────────────────────────────┘
  (সবুজ background — বাংলাদেশের রঙ)

Module 7: Separation of Concerns — কেন আলাদা রাখা জরুরি

একটি বড় ওয়েবসাইটে:
┌──────────────────────────────────────┐
│  ১০০টি HTML পেজ                     │
│  সবগুলোতে h1 এর রঙ লাল করতে হবে   │
└──────────────────────────────────────┘

Inline/Internal CSS ব্যবহার করলে:
→ ১০০টি পেজে গিয়ে আলাদাভাবে বদলাতে হবে
→ সময়: কয়েক ঘণ্টা
→ ভুল হওয়ার সম্ভাবনা: বেশি

External CSS ব্যবহার করলে:
→ শুধু style.css ফাইলে একটি জায়গায় বদলাও
→ সময়: ৩০ সেকেন্ড
→ সব ১০০ পেজ একসাথে বদলে যাবে!

সাধারণ ভুলসমূহ (Common Mistakes)

ভুল	সমস্যা	সঠিক পদ্ধতি
`;` ভুলে যাওয়া	পরের property কাজ করবে না	প্রতিটি declaration-এর শেষে `;` দাও
`{ }` না দেওয়া	Syntax error	`selector { property: value; }`
Class-এ `#` ব্যবহার	ID selector হয়ে যায়	class-এ `.`, id-এ `#` ব্যবহার করো
`colour` (ইংরেজি বানান)	CSS বুঝবে না	সঠিক spelling: `color`
`px` ছাড়া মান	কাজ নাও করতে পারে	`font-size: 16px` (unit দাও)
External CSS-এ ভুল পাথ	style কাজ করবে না	`href`-এ সঠিক পাথ দাও

Trade-offs (সুবিধা-অসুবিধা)

CSS যুক্ত করার পদ্ধতি	সুবিধা	অসুবিধা
Inline	দ্রুত test করা যায়	Reusable না, code জটিল
Internal	একটি পেজের জন্য কার্যকর	একাধিক পেজে duplicate করতে হয়
External	Reusable, রক্ষণাবেক্ষণ সহজ	আলাদা file request লাগে

MCQ Quiz

1. CSS-এর পূর্ণরূপ কী?

(ক) Colorful Style Sheets
(খ) Computer Style Sheets
(গ) Cascading Style Sheets ✓
(ঘ) Creative Style Sheets

2. CSS-এর সঠিক সিনট্যাক্স কোনটি?

(ক) selector: {property = value}
(খ) selector { property: value; } ✓
(গ) {selector: property = value}
(ঘ) selector (property: value)

3. HTML-এ External CSS ফাইল যুক্ত করতে কোন ট্যাগ ব্যবহার করা হয়?

(ক) <css>
(খ) <style>
(গ) <link> ✓
(ঘ) <stylesheet>

4. Class Selector-এ CSS-এ কোন চিহ্ন ব্যবহার করা হয়?

(ক) #
(খ) . ✓
(গ) @
(ঘ) *

5. ID Selector-এ CSS-এ কোন চিহ্ন ব্যবহার করা হয়?

(ক) # ✓
(খ) .
(গ) @
(ঘ) *

6. লেখার রঙ পরিবর্তন করতে কোন CSS property ব্যবহার করা হয়?

(ক) text-color
(খ) font-color
(গ) color ✓
(ঘ) foreground

7. Inline CSS-এ কোথায় style লেখা হয়?

(ক) আলাদা .css ফাইলে
(খ) <head>-এর ভেতরে <style> ট্যাগে
(গ) HTML element-এর style attribute-এ ✓
(ঘ) <body>-এর শেষে

8. Specificity অনুযায়ী কোন Selector-এর প্রাধান্য সবচেয়ে বেশি?

(ক) Element Selector
(খ) Class Selector
(গ) ID Selector ✓
(ঘ) সবার সমান

প্রতিফলন প্রশ্ন (Reflection Questions)

CSS ছাড়া শুধু HTML দিয়ে কি সুন্দর ওয়েবসাইট বানানো সম্ভব? কেন CSS আলাদা রাখা ভালো?
Inline, Internal ও External CSS — কোন পরিস্থিতিতে কোনটি ব্যবহার করবে?
Class ও ID Selector-এর মধ্যে পার্থক্য কী? কখন কোনটি ব্যবহার করবে?
Cascading মানে কী? Specificity কীভাবে কাজ করে?
Box Model (margin, padding, border) কীভাবে একটি element-এর চারদিকের ব্যবধান নিয়ন্ত্রণ করে?

অনুশীলন কাজ (Practice Tasks)

সহজ: একটি HTML পেজ তৈরি করো এবং Internal CSS দিয়ে:
- h1 কে সবুজ রঙে বড় করো
- p কে নীল রঙে দেখাও
- body-তে হালকা ধূসর background দাও
মধ্যম: আলাদা style.css ফাইল তৈরি করো এবং External CSS ব্যবহার করে:
- "বাংলাদেশ ক্রিকেট" শিরোনাম সহ একটি পেজ বানাও
- বাংলাদেশের পতাকার রঙ (সবুজ ও লাল) ব্যবহার করো
- একটি সুন্দর button তৈরি করো
উন্নত: তিনটি HTML পেজ (index.html, about.html, contact.html) তৈরি করো:
- একটি style.css ফাইল তিনটি পেজেই link করো
- Class selector ব্যবহার করে .highlight class তৈরি করো
- ID selector ব্যবহার করে প্রতিটি পেজের main title আলাদা করো

📝 HSC পরীক্ষার টিপস:

CSS = Cascading Style Sheets — পূর্ণরূপ অবশ্যই মনে রাখতে হবে
CSS যুক্ত করার তিন পদ্ধতি: Inline, Internal, External — সুবিধা-অসুবিধাসহ জানো
CSS সিনট্যাক্স: selector { property: value; } — এটি মনে রাখা আবশ্যিক
Class selector: .className (dot দিয়ে শুরু)
ID selector: #idName (hash দিয়ে শুরু)
Specificity: Element < Class < ID < Inline
External CSS-এ <link rel="stylesheet" href="style.css"> ব্যবহার হয়

সারাংশ:

CSS (Cascading Style Sheets) HTML-কে সুন্দর করে — রঙ, আকার, ব্যবধান নির্ধারণ করে

CSS সিনট্যাক্স: selector { property: value; } — Selector, Property, Value তিনটিই গুরুত্বপূর্ণ

CSS যুক্ত করার ৩ পদ্ধতি: Inline (element-এ) | Internal (<style> ট্যাগে) | External (আলাদা .css ফাইলে)

External CSS সেরা পদ্ধতি — একটি ফাইল দিয়ে সব পেজ নিয়ন্ত্রণ করা যায়

Selector-এর ধরন: Element (h1) | Class (.myClass) | ID (#myId)

Specificity: ID > Class > Element — conflict হলে বেশি specific-টি জিতবে

HTML = বাড়ির কাঠামো, CSS = বাড়ির রঙ ও সাজসজ্জা

CSS Intro

সিএসএস পরিচিতি (CSS Introduction)

একটি গল্প দিয়ে শুরু করি

সমস্যাটা কী ছিল CSS ছাড়া?

ভিজ্যুয়াল মডেল (ASCII Diagram)

মানসিক মডেল (Mental Model)

মূল ধারণা (Formal Concept)

Module 1: CSS-এর সিনট্যাক্স (Syntax — লেখার নিয়ম)

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

পদ্ধতি ১: Inline CSS (ইনলাইন — একই লাইনে)

পদ্ধতি ২: Internal CSS (ইন্টার্নাল — পেজের ভেতরে)

পদ্ধতি ৩: External CSS (এক্সটার্নাল — আলাদা ফাইলে) ⭐ সেরা পদ্ধতি

তিন পদ্ধতির তুলনা

Module 3: Selectors (নির্বাচক) — কাকে style দেব

3.1 Element Selector (উপাদান নির্বাচক)

3.2 Class Selector (শ্রেণি নির্বাচক) — . দিয়ে

3.3 ID Selector (পরিচয় নির্বাচক) — # দিয়ে

Module 4: সাধারণ Properties (বৈশিষ্ট্যসমূহ)

4.1 রঙ সম্পর্কিত

4.2 লেখা (Typography) সম্পর্কিত

4.3 আকার (Box Model) সম্পর্কিত

4.4 সীমানা (Border) সম্পর্কিত

Module 5: Cascade ও Specificity — কোন CSS জিতবে

Module 6: Before vs After — CSS-এর শক্তি

Module 7: Separation of Concerns — কেন আলাদা রাখা জরুরি

সাধারণ ভুলসমূহ (Common Mistakes)

Trade-offs (সুবিধা-অসুবিধা)

MCQ Quiz

প্রতিফলন প্রশ্ন (Reflection Questions)

অনুশীলন কাজ (Practice Tasks)

3.2 Class Selector (শ্রেণি নির্বাচক) — `.` দিয়ে

3.3 ID Selector (পরিচয় নির্বাচক) — `#` দিয়ে