Introducing CSS: Syntax, Selectors & Specificity

CSS পরিচিতি — সিনট্যাক্স, সিলেক্টর ও স্পেসিফিসিটি

Read: ~22 min Beginner 5 practice problems Live preview runner

1. Welcome to Phase 4 — Here Comes CSS

Every module so far has been pure HTML — content and structure, black text on a white background. Starting now, we introduce CSS (Cascading Style Sheets): the language that tells the browser how that structure should look. From this module on, most code blocks in this course will show two panes — an html-code pane for markup, and a css-code pane for style rules — and the live preview will combine both into one rendered page.

এখন পর্যন্ত প্রতিটি মডিউল ছিল শুধুই HTML — কনটেন্ট ও গঠন, সাদা ব্যাকগ্রাউন্ডে কালো টেক্সট। এখন থেকে আমরা পরিচয় করাচ্ছি CSS (Cascading Style Sheets)-এর সাথে — যে ভাষা ব্রাউজারকে বলে দেয় সেই গঠনটি কেমন দেখাবে। এই মডিউল থেকে শুরু করে, এই কোর্সের বেশিরভাগ কোড ব্লকে দুটি প্যানেল থাকবে — মার্কআপের জন্য একটি html-code প্যানেল, এবং স্টাইল নিয়মের জন্য একটি css-code প্যানেল — এবং লাইভ প্রিভিউ দুটোকে একত্র করে একটি রেন্ডার করা পেজ দেখাবে।

CSS never works alone — it always needs a target. Without HTML to describe what exists on the page, CSS has nothing to point at and nothing to style. That target is called a selector, and choosing the right one is the whole game of CSS.

CSS কখনো একা কাজ করে না — এর সবসময় একটি লক্ষ্য (target) দরকার। HTML না থাকলে, যা পেজে আছে তা বর্ণনা করার কিছু থাকে না, ফলে CSS-এর কিছু নির্দেশ করার বা স্টাইল করার থাকে না। এই লক্ষ্যকেই বলা হয় সিলেক্টর (selector), এবং সঠিক সিলেক্টর বেছে নেওয়াই CSS-এর পুরো খেলা।

2. Three Ways to Write CSS

CSS can be attached to HTML in three ways: inline (a style attribute on one tag), internal (a <style> block in the <head>), and external (a separate .css file linked with <link>). External CSS is the professional default — it keeps content and styling separate and lets one stylesheet style an entire site.

CSS তিনভাবে HTML-এর সাথে যুক্ত করা যায় — inline (একটি ট্যাগে style অ্যাট্রিবিউট), internal (<head>-এ একটি <style> ব্লক), এবং external (<link> দিয়ে যুক্ত একটি আলাদা .css ফাইল)। External CSS-ই পেশাদার ডিফল্ট পদ্ধতি — এটি কনটেন্ট ও স্টাইলকে আলাদা রাখে এবং একটি স্টাইলশিট দিয়ে পুরো সাইট স্টাইল করা যায়।

Method	Where it lives	বাংলায়
Inline	`<p style="color:red;">` — applies to one element only.	শুধু একটি এলিমেন্টে প্রযোজ্য।
Internal	`<style>...</style>` in `<head>` — applies to that one page.	শুধু সেই একটি পেজে প্রযোজ্য।
External	`<link rel="stylesheet" href="style.css">` — applies to every page that links it.	যে পেজগুলো লিংক করে, সব পেজে প্রযোজ্য।

Common Mistake — সাধারণ ভুল Inline styles win almost every specificity battle, which makes them hard to override later. Save them for quick one-off tests, not real projects.

Inline স্টাইল প্রায় প্রতিটি specificity লড়াইয়ে জেতে, ফলে পরে সেটি override করা কঠিন হয়ে যায়। শুধু দ্রুত পরীক্ষার জন্য এটি ব্যবহার করুন, বাস্তব প্রজেক্টে নয়।

3. Element, Class & ID Selectors — Run It Live 🚀

A CSS rule is a selector followed by a block of declarations in curly braces, each declaration being a property: value; pair. The example below styles by element tag, then by class, then by a unique id — click Run ▶ to see all three at once.

একটি CSS নিয়ম হলো একটি সিলেক্টর এবং তারপর কার্লি ব্রেসের ভেতর কিছু ডিক্লারেশন, প্রতিটি ডিক্লারেশন একটি property: value; জোড়া। নিচের উদাহরণটি প্রথমে element ট্যাগ দিয়ে, তারপর class দিয়ে, তারপর একটি ইউনিক id দিয়ে স্টাইল করে — সব একসাথে দেখতে Run ▶-এ ক্লিক করুন।

index.html

<h1>Welcome</h1>
<p>This paragraph is styled by the element selector.</p>
<p class="highlight">This one also has the "highlight" class.</p>
<p id="intro">This one has a unique id.</p>

style.css

p {
  color: #374151;
  font-size: 16px;
}

.highlight {
  background: #fff7ed;
  color: #ea580c;
  font-weight: 600;
}

#intro {
  color: #39b549;
  font-style: italic;
}

Anatomy — প্রতিটি অংশের কাজ

Piece	Meaning	বাংলায়
`p { }`	Element selector — targets every `<p>` tag.	প্রতিটি `<p>` ট্যাগকে টার্গেট করে।
`.highlight`	Class selector — targets any element with `class="highlight"`, reusable on many tags.	`class="highlight"` থাকা যেকোনো এলিমেন্টকে টার্গেট করে।
`#intro`	ID selector — targets the one element with `id="intro"`; ids must be unique per page.	`id="intro"`-যুক্ত একমাত্র এলিমেন্ট; আইডি পেজে একটাই হতে হবে।
`color: #39b549;`	A declaration — property, colon, value, semicolon.	একটি ডিক্লারেশন — প্রপার্টি, কোলন, ভ্যালু, সেমিকোলন।

4. Combinators & Grouping Selectors

Selectors can be combined to target more precisely. A descendant combinator (space) selects any nested match anywhere inside; a child combinator (>) selects only direct children. You can also group unrelated selectors with a comma to give them the same styles in one rule, avoiding repetition.

আরও নির্দিষ্টভাবে টার্গেট করতে সিলেক্টর একত্র করা যায়। Descendant combinator (স্পেস) ভেতরে যেকোনো জায়গায় থাকা ম্যাচকে সিলেক্ট করে; child combinator (>) শুধু সরাসরি সন্তান (child) এলিমেন্টকে সিলেক্ট করে। অসম্পর্কিত সিলেক্টরগুলোকে কমা দিয়ে একসাথে গ্রুপ করেও একই স্টাইল দেওয়া যায়, পুনরাবৃত্তি এড়াতে।

Syntax	Meaning	বাংলায়
`nav a`	Any `<a>` anywhere inside a `<nav>`.	একটি `<nav>`-এর ভেতরের যেকোনো `<a>`।
`ul > li`	Only direct `<li>` children of a `<ul>`.	শুধু `<ul>`-এর সরাসরি `<li>` child।
`h1, h2, h3`	Grouped selector — same rule applies to all three.	গ্রুপ করা সিলেক্টর — তিনটিতেই একই নিয়ম প্রযোজ্য।
`p.note`	Only `<p>` elements that also have `class="note"`.	শুধু সেই `<p>` যার `class="note"` আছে।

5. The Cascade — Why "Cascading" Is in the Name

When multiple rules could apply to the same element, the browser doesn't pick randomly — it follows the cascade: rules are resolved by origin and importance, then by specificity, and finally by source order (later rules win ties). This is why CSS is called Cascading Style Sheets — styles flow down and combine, layer by layer.

একই এলিমেন্টে একাধিক নিয়ম প্রযোজ্য হলে ব্রাউজার এলোমেলোভাবে বেছে নেয় না — এটি cascade অনুসরণ করে: প্রথমে origin ও importance অনুযায়ী, তারপর specificity অনুযায়ী, এবং শেষে source order অনুযায়ী (টাই হলে পরের নিয়ম জেতে) সিদ্ধান্ত হয়। এই কারণেই CSS-কে বলা হয় Cascading Style Sheets — স্টাইল ধাপে ধাপে নিচে প্রবাহিত হয়ে একত্রিত হয়।

Figure 11.1 — cascade যে ক্রমে সিদ্ধান্ত নেয়।

6. Specificity Basics — Who Wins?

Specificity is a scoring system: id selectors score highest, then class (and attribute/pseudo-class) selectors, then element (and pseudo-element) selectors. A more specific selector wins regardless of where it appears in the file. Inline styles beat all of these, and !important beats everything — but should almost never be used.

Specificity একটি স্কোরিং সিস্টেম — id সিলেক্টরের স্কোর সবচেয়ে বেশি, তারপর class (এবং attribute/pseudo-class) সিলেক্টর, তারপর element (এবং pseudo-element) সিলেক্টর। ফাইলে যেখানেই থাকুক না কেন, বেশি specific সিলেক্টরই জেতে। Inline স্টাইল এসবের চেয়েও শক্তিশালী, এবং !important সবকিছুর চেয়ে শক্তিশালী — কিন্তু এটি প্রায় কখনোই ব্যবহার করা উচিত নয়।

ID — highest
#intro beats class and element rules.

Class — middle
.highlight beats element rules, loses to id.

Element — lowest
p loses to both class and id rules.

Key insight When two rules conflict, the browser doesn't ask "which came last?" first — it asks "which is more specific?" Source order only breaks ties between equally specific selectors.

দুটি নিয়ম সাংঘর্ষিক হলে ব্রাউজার প্রথমে "কোনটি শেষে এসেছে?" জিজ্ঞেস করে না — বরং জিজ্ঞেস করে "কোনটি বেশি specific?" সমান specificity হলেই কেবল source order টাই ভাঙে।

7. Glossary (শব্দকোষ)

Term	Meaning	বাংলায়
Selector	The part of a rule that says which elements to style.	একটি নিয়মের যে অংশ বলে দেয় কোন এলিমেন্ট স্টাইল হবে।
Declaration	A single `property: value;` pair inside a rule.	একটি নিয়মের ভেতর একটি `property: value;` জোড়া।
Cascade	The process that resolves conflicting rules.	সাংঘর্ষিক নিয়ম সমাধানের প্রক্রিয়া।
Specificity	A score that decides which selector wins a conflict.	একটি স্কোর যা ঠিক করে কোন সিলেক্টর জিতবে।
Inheritance	Some properties (like `color`) pass down from parent to child automatically.	কিছু প্রপার্টি (যেমন `color`) স্বয়ংক্রিয়ভাবে parent থেকে child-এ চলে যায়।

8. Practice Problems

Every problem has a Show Answer button with real, runnable HTML+CSS. Try it yourself first, then check.

প্রতিটি প্রশ্নের সাথে Show Answer বাটন রয়েছে, যেখানে চালু-করার-যোগ্য HTML+CSS দেওয়া আছে। প্রথমে নিজে চেষ্টা করুন, তারপর মিলিয়ে নিন।

Write CSS that makes every <h2> green and every <p> dark gray, using element selectors.

Element সিলেক্টর ব্যবহার করে এমন CSS লিখুন যা প্রতিটি <h2>-কে সবুজ এবং প্রতিটি <p>-কে গাঢ় ধূসর করে।
✨ Show Answer (উত্তর দেখুন)
ans1.html
```
<h2>Section Title</h2>
<p>Some body text goes here.</p>
```
style.css
```
h2 {
  color: #39b549;
}

p {
  color: #374151;
}
```
Add a class "card" that gives an element a light background, padding, and rounded corners — apply it to two different <div>s.

এমন একটি "card" ক্লাস বানান যা একটি এলিমেন্টকে হালকা ব্যাকগ্রাউন্ড, প্যাডিং ও গোলাকার কোণা দেয় — এটি দুটি ভিন্ন <div>-এ প্রয়োগ করুন।
✨ Show Answer (উত্তর দেখুন)
ans2.html
```
<div class="card">First card</div>
<div class="card">Second card</div>
```
style.css
```
.card {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 10px;
}
```
Given a rule for "p" (color blue) and a rule for ".note" (color orange) both applying to the same <p class="note">, which color wins and why?

"p" (নীল রঙ) এবং ".note" (কমলা রঙ) — দুটি নিয়মই একই <p class="note">-এ প্রযোজ্য হলে কোন রঙ জিতবে এবং কেন?

✨ Show Answer (উত্তর দেখুন)

Answer: Orange wins. A class selector (.note) has higher specificity than an element selector (p), so it overrides the element rule regardless of which one is written first in the file.

কমলা রঙ জিতবে। একটি class সিলেক্টরের (.note) specificity একটি element সিলেক্টরের (p) চেয়ে বেশি, তাই ফাইলে যেটাই আগে লেখা থাক না কেন, এটি element নিয়মকে override করে।
Write a descendant selector that styles only <a> links found inside a <footer>, making them light gray.

এমন একটি descendant সিলেক্টর লিখুন যা শুধুমাত্র <footer>-এর ভেতরের <a> লিংককে হালকা ধূসর করে।
✨ Show Answer (উত্তর দেখুন)
ans4.html
```
<footer>
  <a href="#">Privacy</a>
  <a href="#">Terms</a>
</footer>
<a href="#">This link is outside footer</a>
```
style.css
```
footer a {
  color: #9ca3af;
}
```
In two sentences, explain why relying on inline styles across a whole website is a bad practice.

দুই বাক্যে ব্যাখ্যা করুন, পুরো ওয়েবসাইট জুড়ে inline স্টাইলের ওপর নির্ভর করা কেন একটি খারাপ অভ্যাস।

✨ Show Answer (উত্তর দেখুন)

Answer: Inline styles mix presentation with content on every single tag, making the HTML harder to read and forcing you to repeat the same styling everywhere it's needed. They also have very high specificity, making them difficult to override later without adding even more inline styles or !important.

Inline স্টাইল প্রতিটি ট্যাগেই কনটেন্টের সাথে উপস্থাপনা মিশিয়ে ফেলে, ফলে HTML পড়া কঠিন হয়ে যায় এবং যেখানেই দরকার সেখানেই একই স্টাইল বারবার লিখতে হয়। এদের specificity-ও অনেক বেশি, ফলে পরে আরও inline স্টাইল বা !important ছাড়া এগুলো override করা কঠিন হয়ে পড়ে।

Summary — Module 11

CSS attaches to HTML inline, internally, or externally — external is the professional default. Rules are built from a selector plus declarations, and selectors can target elements, classes, ids, or combinations of them. When rules conflict, the cascade resolves it using origin, then specificity (id > class > element), then source order.

CSS তিনভাবে HTML-এর সাথে যুক্ত হয় — inline, internal, বা external — এর মধ্যে external-ই পেশাদার ডিফল্ট। নিয়ম তৈরি হয় একটি সিলেক্টর ও কিছু ডিক্লারেশন দিয়ে, এবং সিলেক্টর element, class, id বা তাদের সমন্বয়কে টার্গেট করতে পারে। নিয়ম সাংঘর্ষিক হলে cascade origin, তারপর specificity (id > class > element), তারপর source order দিয়ে সমাধান করে।

Next Module → The Box Model — প্রতিটি HTML এলিমেন্ট কীভাবে একটি বাক্স হিসেবে আচরণ করে তা বোঝা।

Previous: Milestone: Build a Static Multi-Section Page Next: The Box Model