Class 9 · CSS Selectors — Styling Begins · FSWD

UNIT 1 · WEB BASICS, HTML & CSS PART A · CLASS 9 OF 12 UI23PC510CS · THEORY

Today's craft

Your site stops looking like 1995 — CSS begins.

Eight classes and two labs in, poshtik-campus/ is structurally excellent — real pages, real links, a real order form, real semantic anatomy, all under Git. And it looks like a school notice board. Today that changes: CSS — Cascading Style Sheets — is the language that describes how HTML should look. But before a single colour lands, you must learn the skill every CSS rule starts with: the selector — how a rule finds the elements it will style. Selectors first, properties next class. One new thing at a time.

Walk out of this room able to…

Read any CSS rule and name its three parts: selector · property · value

Choose correctly between an element, .class and #id selector — and defend the choice

Style all ten Poshtik dish cards with ONE rule — the payoff a class selector exists for

Answer the 4-mark P1·Q11b selector question, from taught material

THE HOUR, POINT BY POINT

01Why the site still looks bare — and what CSS actually isIDEA

02Three ways to attach CSS — inline, internal, external — and the course ruleIDEA

03Anatomy of a rule — selector · property · value, one segment per pressIDEA

04Element selectors — p, h1 — every match on the page obeysIDEA

05.class vs #id — ten dish cards vs one page header, felt at full scaleIDEA

06PYQ · P1·Q11b · 4m — define a selector, name 5 typesEXAM Q

07Activity 1 — fill the three selector gaps, style the whole menuTRY IT

08Activity 1 verdicts — solution sheet with live previewSOLUTION

09Descendant and grouped selectors — combining what you knowIDEA

10Activity 2 — DevTools: two rules fight over one element, who wins?TRY IT

11Activity 2 verdict — the annotated Styles panelSOLUTION

12Self-study preview + close — :hover is coming, properties next classSELF-STUDY

The idea first

What CSS is — and why it lives apart from HTML.

Since Class 3 this course has repeated one rule: HTML says what content means, never how it looks. That was a promise — "the looks come later." Today is later. CSS — Cascading Style Sheets — is a second, separate language whose only job is appearance: colours, sizes, spacing, fonts. Two languages, two jobs. The pros call this separation of concerns, and you've been living its first half for eight classes.

YOUR menu.html TODAY — CORRECT, BUT BARE

Ragi Idli BowlSoft steamed finger-millet idlis with chutney.

Pesarattu with SproutsAndhra green-gram dosa, topped with fresh sprouts.

Gongura Sprouts SaladTangy gongura leaves with mixed sprouts.

Times New Roman, black on white, browser defaults everywhere. Nothing is wrong — and nothing is designed.

THE SAME FILE + A FEW CSS RULES

Ragi Idli BowlSoft steamed finger-millet idlis with chutney.

Pesarattu with SproutsAndhra green-gram dosa, topped with fresh sprouts.

Gongura Sprouts SaladTangy gongura leaves with mixed sprouts.

Not one HTML tag changed. Only style rules were added — that's the whole division of labour, seen once and never forgotten.

Browser window showing menu.html with no CSS applied: plain black Times New Roman serif text on a white background, a bare Poshtik Campus heading, three default blue underlined links, a grey horizontal rule, and three dish names with descriptions and prices stacked flat with no colour, boxes or spacing. — This is exactly what your **menu.html** looks like today — correct HTML, zero styling. Times New Roman, black on white, everything flush left, headings sized only by the browser's own defaults. Nothing here is broken; nothing here is *designed*. Every pixel of appearance you see is the **browser's** opinion, not yours.

Browser window showing the same menu.html after CSS is applied: a dark slate-gray centred header banner with the white heading Poshtik Campus Menu and a white tagline, a pale mint navigation bar with a green bottom border holding three green links without underlines, a sea-green heading Today's Healthy Ten, and three pale mint dish cards each with a two-pixel sea-green border, a food photo, a bold sea-green dish name, a description and a price, all on a warm off-white background in a sans-serif font. — Same file. Same tags. Same words. **One stylesheet later.** The banner is dark, the nav is a mint bar, each dish sits in its own bordered card, the links dropped their underlines, and the serif font is gone. Compare the two panels line by line — every single difference you can spot was caused by a **selector** finding an element and handing it a property.

Read these two pictures as one sentence: nothing on the left is wrong, and nothing on the right is new content.

Put your finger on any change — the dark banner, the mint cards, the missing underlines — and ask "which tag was added to cause that?" The honest answer is always none. The HTML is byte-for-byte identical in both screenshots. That is what people mean when they say CSS is a presentation language: it never adds meaning, it only decides how existing meaning looks. Today's whole job is learning to write the left-hand side of a rule — the selector — so it points at exactly the element you meant.

One sentence to keep: HTML is the skeleton, CSS is the skin and clothes. The skeleton never changes when you change the outfit — and today you learn how an outfit finds the bone it dresses: the selector.

GOING DEEPER — WHY "CASCADING"?

The C in CSS earns its keep later: several style rules can apply to the same element at once — from the browser's defaults, from your stylesheet, from more than one of your own rules. The cascade is the referee that decides which rule wins. You'll meet the referee properly in Activity 2 today, and formally when specificity is taught. For now: one language for meaning, one for looks, and a rulebook for conflicts.

Why does separation matter commercially? Because one stylesheet can restyle a thousand pages. When a brand changes its colours, engineers edit one CSS file — not a thousand HTML files. You'll feel a miniature of this today when one rule repaints ten dish cards.

Where CSS lives

Three ways to attach CSS. The course uses one.

The same tiny rule — make the heading green — written all three legal ways, each inside a complete, runnable file, so the differences are visible side by side. Watch where the CSS sits in each card.

1 · INLINE — INSIDE THE TAG

<!DOCTYPE html> <html lang="en"> <head> <title>Inline demo</title> </head> <body> <h1 style="color: green;"> Poshtik Campus </h1> </body> </html>

✗ Style glued to ONE tag. Ten headings = type it ten times. Meaning and looks tangled in the same line — the exact mixing we've avoided for eight classes.

2 · INTERNAL — A <style> BLOCK IN <head>

<!DOCTYPE html> <html lang="en"> <head> <title>Internal demo</title> <style> h1 { color: green; } </style> </head> <body> <h1>Poshtik Campus</h1> </body> </html>

△ Better — one rule reaches every h1 on this page. But menu.html, index.html and about.html would each need their own copy. Three files, three copies, three places to forget.

3 · EXTERNAL — A SEPARATE .css FILE

<!DOCTYPE html> <html lang="en"> <head> <title>External demo</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Poshtik Campus</h1> </body> </html> /* style.css — ONE separate file */ h1 { color: green; }

✓ One file styles the whole site. Change it once, every page follows. This is how real teams work — and how this course works from today on.

Course rule, stated once and locked: we use external CSS from here on. Inline and internal exist, exams may name them (today's PYQ does not, but a later one will), and DevTools will show you inline styles in the wild — but everything we write goes in a .css file linked with <link>. Today's activity file is called style-start.css for exactly this reason.

GOING DEEPER — WHEN WOULD ANYONE USE THE OTHER TWO?

Inline survives in two niches: HTML emails (many mail clients strip stylesheets) and quick JavaScript-driven changes you'll meet in Unit 2. Internal suits genuine one-page documents — a single-file report, a coding-exam answer where two files aren't allowed. Neither niche describes a multi-page site like poshtik-campus, which is why external wins here without argument.

The grammar

Every CSS rule ever written has this exact shape.

Learn this one anatomy and you can read any stylesheet on Earth — including the 4,000-line ones behind Swiggy. Three parts: who to style, what to change, and what to change it to.

ONE RULE, DISSECTED

h1SELECTOR — who gets styled. Today's entire class is about this part. {open brace — the rule's body starts colorPROPERTY — what to change :colon — never = greenVALUE — change it to this ;semicolon ends each declaration }close brace — rule over

Read it aloud, always the same way: "For every h1, set color to green." Selector → property → value. If you can say the sentence, you can write the rule. And note the two punctuation traps that eat marks: it's a colon between property and value (not =), and a semicolon after every declaration.

GOING DEEPER — MORE THAN ONE DECLARATION

The braces can hold as many property: value; pairs as you like — that whole package is still one rule with one selector: h1 { color: green; text-align: center; }. Properties themselves are next class's topic; today every example deliberately uses only two or three simple ones (color, background-color, border) so your attention stays on the selector.

YOUR NOTEBOOK — write the "read-aloud sentence" for: p { color: green; }

Selector № 1

Element selectors — name a tag, style every one of them.

The simplest selector is just a tag name, no punctuation at all. Write p and every paragraph on the page obeys — first one, last one, and every one you add next week. Watch it land one line per press, then check the preview.

class-09/element-demo.html · complete fileSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <title>Element demo</title> </head>
4<body>
5  <h2>Millet Wraps</h2>
6  <p>Jonna rotte, sajja roti — Telangana classics.</p>
7  <h2>Protein Bowls</h2>
8  <p>Ulava charu, paneer — the heavy lifters.</p>
9</body>
10</html>
·/* HTML is complete & plain above. Now add a <style> — one rule per press ↓ */
11  h2 { color: green; }   /* ELEMENT rule — hits BOTH headings */
12  p { color: gray; }    /* ELEMENT rule — grays BOTH paragraphs */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN CSS GROWS

element-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/element-demo.html

Millet Wraps

Jonna rotte, sajja roti — Telangana classics.

Protein Bowls

Ulava charu, paneer — the heavy lifters.

First the plain HTML grows line by line (black serif, no colour). Then the last two presses add the h2 rule, then the p rule — each lands on the text already on screen.

Count the rules, count the changes: ONE h2 rule painted BOTH headings; one p rule grayed BOTH paragraphs. An element selector never styles "the first match" — it styles every match, present and future.

The question element selectors can't answer: "style these paragraphs but not those." p hits every paragraph — dish descriptions and the footer's © line and the form's labels. The moment you want to pick a group of your own choosing, you need the next selector.

Selectors № 2 & 3 — the exam favourites

.class styles a family. #id styles an individual.

Picture a menu page holding ten <article class="dish"> cards and exactly one <header id="page-header"> — the textbook situation for each selector. Each selector below gets its own fresh, complete, from-scratch file (the same pattern as the PYQ solution): type it, run it, see the real output. Nothing from any earlier class is needed — every file below stands alone. First the family:

class-demo.html · complete file, from scratchSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <meta charset="UTF-8"> <title>The class selector</title> </head>
4<body>
5  <article class="dish">Jonna Rotte Wrap</article>
6  <article class="dish">Sajja Roti Wrap</article>
7  <article class="dish">Ragi Sangati Bowl</article>
8  <article class="dish">Ragi Idli Bowl</article>
9  <article class="dish">Pesarattu with Sprouts</article>
10  <p>Prices include all taxes.</p>  <!-- NO class — the rule must leave this alone -->
11</body>
12</html>
·/* HTML is complete & plain above. Now add the <style> rule ↓ */
13  .dish { background-color: mintcream; border: 2px solid seagreen; padding: 6px 10px; }  /* CLASS — every class="dish" */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN THE RULE

class-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/class-demo.html

Jonna Rotte Wrap

Sajja Roti Wrap

Ragi Sangati Bowl

Ragi Idli Bowl

Pesarattu with Sprouts

Prices include all taxes. ← no class="dish" → untouched ✓

First the six plain HTML lines grow one per press. Then the last press adds the .dish rule — it boxes all five cards at once; the classless line stays plain.

One rule. Five cards. One press — and the classless paragraph stayed plain. This is why class selectors exist: on a full menu page, the SAME .dish rule dresses all ten cards — and would cover dish № 50 the day the menu grows. You'll feel it yourself in Activity 1.

Now the individual — #id.

id-demo.html · complete file, from scratchSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <meta charset="UTF-8"> <title>The id selector</title> </head>
4<body>
5  <header id="page-header">Poshtik Campus Menu</header>  <!-- the ONE header -->
6  <article>Jonna Rotte Wrap</article>  <!-- ordinary content — untouched -->
7  <article>Ragi Idli Bowl</article>
8</body>
9</html>
·/* HTML is complete & plain above. Now add the <style> rule ↓ */
10  #page-header { background-color: darkslategray; color: white; padding: 12px; text-align: center; }  /* ID — the ONE header */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN THE RULE

id-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/id-demo.html

Poshtik Campus Menu

Jonna Rotte Wrap ← plain article — untouched ✓

Ragi Idli Bowl ← untouched ✓

First the three plain HTML lines grow one per press. Then the last press adds the #page-header rule — only the one header gets the dark bar; the two articles stay plain.

One rule, one element — by contract. An id must be unique on the page (you learned this in Class 4 with jump-links). #page-header can only ever dress one element, and that's the point. In Activity 1's page, the same rule dresses its one <header id="page-header">.

The choosing rule, worth 2 marks any day: will this style ever apply to more than one element? Yes → .class (many elements may share a class). Guaranteed exactly one → #id (an id is unique per page). When unsure, professionals default to .class — a family of one is legal, but an id can never become a family.

GOING DEEPER — THE PUNCTUATION MAP

In the HTML you write class="dish" and id="page-header" — no dot, no hash. The dot and hash live only in the CSS: .dish means "elements whose class attribute contains dish", #page-header means "the element whose id is page-header". Writing class=".dish" in HTML is a classic first-week bug — the selector then has to be ..dish to match, which nobody ever intends.

One element may carry several classes at once — class="dish special" joins both the .dish family and the .special family. You'll use this constantly from Unit 3 onward.

This exact material was examined

PYQ — define a selector, name five types. 4 marks, right now.

You've now met three selector types and two more arrive in Part 9 — which means you can already score this real past-paper question from taught material. Model answer builds one point per press, the way you'd write it on the ruled sheet.

PREVIOUS EXAM QUESTION PAPER 1 · Q11(b) 4 MARKS

asked verbatim!Q11(b). What is a CSS selector? List any five types of selectors with an example for each. [4M]

Model answer — definition first, then the five types:

1

Definition: a selector is the part of a CSS rule that identifies which HTML element(s) the rule's style declarations will apply to.✓ 1m

2

Element selector — selects every element of a tag name. p { color: gray; } styles all paragraphs.

3

Class selector — selects all elements sharing a class attribute; written with a dot. .dish { border: 2px solid green; }

4

ID selector — selects the ONE element with a given id; written with a hash. #page-header { color: white; } id must be unique per page

5

Descendant selector — selects elements inside another; written with a space. nav a { color: green; } styles only links inside the nav.

6

Grouped selector — one rule for several selectors, separated by commas. h1, h2 { color: green; }✓ 3m for any five types + examples

✓

Marking logic: 1 mark for the definition + 3 marks for five named types with examples. Types without examples usually earn half — never skip the examples.

▸

Prove it in one file — the program selector-demo.html builds LIVE right below this sheet, one press per line: all five selector types from this answer, working together in a single runnable page, and its real output screen grows in sync beside the code.

Honest flag: descendant and grouped selectors appear in this answer before their teaching part (Part 9) — deliberately, because the exam answer needs five types and the two you haven't met yet are one line each. When Part 9 arrives, you'll recognise them instead of meeting them cold. Everything else above is already yours.

The proof, live. One press per line on the left — and the browser screen on the right grows the same moment. This single complete file uses all five selector types from the answer above, each labelled in a comment. Internal CSS is the right call here for exactly the reason Part 3 named: a one-file coding-exam answer.

selector-demo.html · complete fileSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <title>Five selectors, one page</title> </head>
4<body>
5  <header id="page-header">Poshtik Campus Menu</header>
6  <nav><a href="menu.html">Menu</a> <a href="about.html">About</a></nav>
7  <h1>Today's Healthy Ten</h1>
8  <h2>Millet Wraps</h2>
9  <p class="dish">Jonna Rotte Wrap — Rs. 60</p>
10  <p class="dish">Ragi Idli Bowl — Rs. 50</p>
11  <p>Prices include all taxes.</p>
12</body>
13</html>
·/* HTML is complete & plain above. Now add a <style> — one rule per press ↓ */
14  p { color: gray; }                          /* 1 · ELEMENT */
15  .dish { border: 2px solid green; padding: 6px; }  /* 2 · CLASS */
16  #page-header { background-color: darkgreen; color: white; padding: 10px; }  /* 3 · ID */
17  nav a { color: green; }                    /* 4 · DESCENDANT */
18  h1, h2 { color: green; }                  /* 5 · GROUPED */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN EACH SELECTOR

selector-demo

file:///C:/Users/student/Desktop/fswd-practice/class-09/selector-demo.html

Poshtik Campus Menu ← #id: the ONE header

Menu About ← nav a: links inside nav only

Today's Healthy Ten

Millet Wraps ← h1, h2: one grouped rule painted both

Jonna Rotte Wrap — Rs. 60

Ragi Idli Bowl — Rs. 50

Prices include all taxes. ← p: element rule grays EVERY paragraph — the dishes too

First the whole page grows as plain HTML (black serif, blue underlined links). Then the five selector rules land one per press, each changing only what it names.

All five types, proved on one screen: the element rule grayed every paragraph, the class rule boxed only the two dishes, the id rule dressed the one header, the descendant rule reached only the nav's links, and the grouped rule painted both heading levels in one line. Five selectors, zero conflicts — each aiming at exactly what it was invented to hit.

Slow-motion replay — watch the bare page dress itself, one selector at a time. The right side starts as the plain page: black text, blue underlined links, browser defaults — exactly what you get before a single CSS rule exists. Then press once per rule: each selector you reveal on the left lands on the live page instantly, changing only what it names. Plain HTML first — then CSS, in the order you type it, never in one jump.

selector-demo.html · the five rules, applied liveONE PRESS = ONE SELECTOR ON THE PAGE
·/* the page is already on screen (plain, unstyled). Add rules ↓ */
1p { color: gray; }                       /* 1 · ELEMENT — every paragraph */
2.dish { background: mintcream; border: 2px solid seagreen; padding: 6px; }  /* 2 · CLASS — only the dishes */
3#page-header { background: darkslategray; color: white; padding: 10px; }  /* 3 · ID — the one header */
4nav a { color: seagreen; text-decoration: none; }  /* 4 · DESCENDANT — links in nav */
5h1, h2 { color: seagreen; }              /* 5 · GROUPED — both heading levels */

THIS OUTPUT IS REAL — PLAIN FIRST, THEN EACH SELECTOR LANDS

selector-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/selector-demo.html

Poshtik Campus Menu

Today's Healthy Ten

Millet Wraps

Jonna Rotte Wrap — Rs. 60

Ragi Idli Bowl — Rs. 50

Prices include all taxes.

Before any press the page is plain — black serif text, blue underlined links, no header bar (real browser defaults). Each press adds exactly one selector's rule.

That is CSS in sync: the HTML was on screen plain from the first frame; each selector changed exactly what it names, in the order you typed it. Press Back and the page undresses one rule at a time too.

SAVE THIS AS

FOLDERC:\Users\student\Desktop\fswd-practice\class-09\

FILENAMEselector-demo.html — the exact 40 lines from the panel; one file, nothing else needed

GIT?No — exam practice lives in the sandbox. Practice files are never committed; only the continuous project (built in labs) carries commits.

Marks anatomy: 1 mark for the definition + 3 marks for five types with examples — and in a coding variant of this question ("demonstrate any five selectors"), the 40-line file above is the full-marks answer. Write the CSS comments naming each type exactly as shown: examiners reward answers that label their own evidence.

ACTIVITY 1 · FILL-IN-CODE · ~10 MINUTES

Three gaps. Style the whole menu.

Two small files, both typed by you, both from scratch — nothing from any earlier class is needed. First a tiny menu-practice.html (below — one header, three dish cards, two heading levels: a miniature of any real menu page). Then style-start.css — the properties are given; the three selector gaps are yours. Everything you need was taught in the last three parts. Open the page with Live Server and watch it transform as each gap is filled.

menu-practice.html · the page you'll style · complete fileBUILDS ONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <title>Menu — selector practice</title>
5  <link rel="stylesheet" href="style-start.css">  <!-- Class 8's link ritual -->
6</head>
7<body>
8  <header id="page-header">  <!-- the ONE unique header — GAP 2's target -->
9    <h1>Poshtik Campus Menu</h1>
10  </header>
11  <article class="dish">  <!-- the .dish family — GAP 1's target -->
12    <h3>Ragi Idli Bowl</h3><p>Soft steamed finger-millet idlis · Rs. 50</p>
13  </article>
14  <article class="dish">
15    <h3>Jonna Rotte Wrap</h3><p>Telangana sorghum-flatbread wrap · Rs. 60</p>
16  </article>
17  <article class="dish">
18    <h3>Millet Protein Shake</h3><p>Ragi malt, jaggery, milk · Rs. 40</p>
19  </article>
20</body>
21</html>

menu-practice.html — before any CSS

file:///C:/Users/student/Desktop/fswd-practice/class-09/menu-practice.html

Poshtik Campus Menu

Ragi Idli Bowl

Soft steamed finger-millet idlis · Rs. 50

Jonna Rotte Wrap

Telangana sorghum-flatbread wrap · Rs. 60

Millet Protein Shake

Ragi malt, jaggery, milk · Rs. 40

Correct, and bare — exactly as planned. Browser defaults everywhere: the stylesheet link on line 5 points at a file that doesn't exist yet. The moment you create style-start.css and fill its gaps, THIS page transforms — no other file on Earth required.

style-start.css · type this, gaps and allBUILDS ONE LINE PER PRESS
1/* Base look — given. floralwhite page, calm dark text. */
2body
3{
4  font-family: Arial, Helvetica, sans-serif;
5  background-color: floralwhite;
6  color: darkslategray;
7}
9/* GAP 1 — colour EVERY dish card at once (all ten carry class="dish") */
10___GAP_1___
11{
12  background-color: mintcream;
13  border: 2px solid seagreen;
14  padding: 12px;
15  margin: 12px 0;
16}
18/* GAP 2 — the ONE unique page header (id="page-header") */
19___GAP_2___
20{
21  background-color: darkslategray;
22  color: white;
23  padding: 16px;
24  text-align: center;
25}
27/* GAP 3 — one rule, TWO kinds of heading: every h1 AND every h3, seagreen */
28___GAP_3___
29{
30  color: seagreen;
31}

YOUR THREE GAPS

GAP 1

Colour every dish card at once — all ten <article>s carry class="dish". One rule must reach all ten. Hint: starts with a dot.

GAP 2

Style the one unique page header — menu.html has exactly one element with id="page-header". Hint: starts with a hash.

GAP 3

One rule, two kinds of heading — every h1 AND every h3 in the same seagreen, in a single rule. Hint: a comma is involved — and yes, this one type appears in the PYQ you just scored.

RULES

Type menu-practice.html first (the panel above — 21 lines), then the starter into a NEW style-start.css, replacing each whole ___GAP_n___ token; nothing else changes.
The link is already wired — line 5 of menu-practice.html points at style-start.css (Class 8's link ritual).
Save after each gap and refresh: one gap, one visible transformation.

WHERE THIS WORK LIVES

FILESmenu-practice.html + style-start.css — both NEW, both typed by you, side by side in one folder

FOLDERC:\Users\student\Desktop\fswd-practice\class-09\ — today's sandbox; the project repo meets CSS in the lab

VIEW ITLive Server on menu-practice.html — keep it open while you fill gaps; every save repaints instantly

GIT?No — practice lives in the sandbox. The real project stylesheet is born in the lab, where the continuous build lives.

Fill honestly first. A selector you copied styles a page once; a selector you chose styles every page you'll ever write.

SOLUTION SHEET · ACTIVITY 1

The three selectors — and why each one.

style-start.css · gaps filledBUILDS ONE LINE PER PRESS
·/* Styles menu-practice.html (typed above): one header with                     */
·/* id="page-header", article class="dish" cards, h1+h3 headings.               */
9/* GAP 1 — all ten cards share class="dish" */
10.dish
11{
12  background-color: mintcream;
13  border: 2px solid seagreen;
14  padding: 12px;
15  margin: 12px 0;
16}
18/* GAP 2 — exactly one id="page-header" */
19#page-header
20{
21  background-color: darkslategray;
22  color: white;
23  padding: 16px;
24  text-align: center;
25}
27/* GAP 3 — one rule, two heading kinds */
28h1, h3
29{
30  color: seagreen;
31}

THIS OUTPUT IS REAL — PLAIN FIRST, THEN EACH GAP RULE LANDS

menu-practice.html — filling the gaps

file:///C:/Users/student/Desktop/fswd-practice/class-09/menu-practice.html

Poshtik Campus Menu

Healthy Food, Healthy Body, Healthy Mind

Jonna Rotte Wrap

Telangana sorghum-flatbread wrap · Rs. 60

Ragi Idli Bowl

Soft steamed finger-millet idlis · Rs. 50

Millet Protein Shake

Ragi malt, jaggery, milk · Rs. 40

The page starts plain (only the given body rule: floralwhite, dark text). Then each gap's rule lands in turn — GAP 1 boxes the dish cards, GAP 2 dresses the header, GAP 3 greens the headings.

Three selectors, one designed page. A class for the family of ten, an id for the unique header, a group for both heading levels — each selector doing the exact job it was invented for. (Notice the big header title stays white, not seagreen — the #page-header rule out-ranks h1, h3; that's the exact fight Activity 2 inspects next.)

The mistake worth naming: if GAP 1 came out as article instead of .dish — it works today, because all ten articles happen to be dishes. But the moment menu.html gains an <article> that isn't a dish (a news post, an offer banner), the element selector styles it wrongly. Select by role, not by tag — the class names the role.

Selectors № 4 & 5 — combining what you know

Descendant: "only inside here." Grouped: "all of these at once."

You met both in the PYQ as one-liners; now they get their honest treatment. Neither invents new punctuation-magic — a descendant selector is two selectors with a space, a grouped selector is several with commas. The meanings are opposites, and mixing them up is the classic slip.

First, the confusion everybody hits — out loud.

Almost every student meets the same wall here: a and nav a look like the same kind of thing, so it feels like nav a is just "a fancier way to say a". It is not. One of them is one selector; the other is two selectors joined by a space, and the space is a real word — it means "inside". Count the parts before you read the meaning, every single time.

COUNT THE PARTS, THEN SAY IT OUT LOUD

a

ONE PART · ELEMENT SELECTOR"Every <a> on the page." It does not care where the link sits — nav, article, footer, sidebar, inside ten nested boxes. Tag name matches, rule applies. No exceptions, no location test.

nav␠a

TWO PARTS · DESCENDANT SELECTOR"Every <a> that is inside a <nav>." Two tests now, both must pass: is it an a? and is it somewhere inside a nav? Links elsewhere fail the second test and are left alone.

nav, a

TWO PARTS · GROUPED SELECTOR"Every <nav> and also every <a>." A comma makes a list of independent selectors. This paints the nav box itself plus every link everywhere — a completely different set from the line above it.

Same three characters — n a v — three different meanings, decided entirely by what sits between the two names: nothing, a space, or a comma.

navWHERE TO LOOK ␠"INSIDE" aWHAT TO STYLE

1 Read the LAST name first — a — that is the element that actually gets the styling. 2 Then read leftwards: inside a nav — that is only a condition, and the nav itself gets nothing. Right-to-left is how the browser itself reads it, and it decodes every selector you will ever meet.

The one-sentence test, for the rest of your life: in a descendant selector, only the last part is dressed — everything before it is just directions to the address. In nav a the links get the colour and the nav gets nothing. Students who fail this question in the exam almost always styled the wrong half.

descendant-demo.html · complete file, from scratchSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <meta charset="UTF-8"> <title>The descendant selector</title> </head>
4<body>
5  <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="about.html">About</a></nav>  <!-- nav a reaches ONLY in here -->
6  <article><p>Dish text with a <a href="recipe.html">recipe link</a> inside.</p></article>  <!-- untouched -->
7</body>
8</html>
·/* HTML is complete & plain above. Now add the <style> rule ↓ */
9  nav a { color: seagreen; font-weight: bold; }  /* DESCENDANT — read right-to-left: "a elements INSIDE a nav" */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN THE RULE

descendant-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/descendant-demo.html

Home Menu About ← links inside <nav>

…dish text with a recipe link ← inside an article, NOT the nav

First both lines grow as plain HTML — every link blue & underlined (browser default). The last press adds nav a: only the nav's links turn seagreen & bold; the recipe link in the article stays plain blue.

The space means "inside". nav a reaches only anchors that sit within a <nav> — everywhere else, links keep their look. Scope without renaming a single class. The same rule works verbatim in any stylesheet you'll ever write.

EXTRA EXAMPLE 1 Both selectors, one page, one screen: a then nav a.

The demo above showed nav a alone, so you had to imagine the difference. This file puts three links in three different places — one in the nav, one in an article, one in the footer — and then adds the two selectors one after the other. Watch the count change: the element rule paints 3 of 3, the descendant rule re-paints 1 of 3. Same page, same links, one space between the two behaviours.

a-vs-nav-a.html · complete file, from scratchHTML GROWS · THEN RULE 1 · THEN RULE 2
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>a vs nav a</title>
7</head>
8<body>
9  <nav><a href="menu.html">Menu</a></nav>  <!-- LINK 1 · inside a nav -->
10  <article>Try our <a href="recipe.html">ragi recipe</a>.</article>  <!-- LINK 2 · NOT in a nav -->
11  <footer><a href="contact.html">Contact us</a></footer>  <!-- LINK 3 · NOT in a nav -->
12</body>
13</html>
·/* Three plain links on screen. Now a <style> goes INSIDE <head>, before </head> ↓ */
7  <style>
8    a
9    {
10      color: crimson;   /* ONE part — no location test → ALL 3 links */
11    }
12    nav a          /* TWO parts — "a INSIDE nav" → only LINK 1 */
13    {
14      color: seagreen;
15      font-weight: bold;
16    }
17  </style>

THIS OUTPUT IS REAL — COUNT THE LINKS THAT CHANGE

a-vs-nav-a.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/a-vs-nav-a.html

Menu ← LINK 1 · inside <nav>

Try our ragi recipe. ← LINK 2 · inside <article>

Contact us ← LINK 3 · inside <footer>

NO RULES YET · 3 BROWSER-DEFAULT LINKSRULE a · MATCHED 3 OF 3 LINKSRULE nav a · RE-PAINTED 1 OF 3 LINKS

Press 4 adds a — all three links go crimson at once, because an element selector never asks where. Press 5 adds nav a — only LINK 1 turns seagreen; links 2 and 3 stay crimson, because they fail the "inside a nav" test.

Read the two rules as sentences: a = "every link." nav a = "every link that happens to be inside a nav." The second is narrower, never fancier — it filters by location, and location is the one thing an element selector can never express.

a → LINK 1 ✓ LINK 2 ✓ LINK 3 ✓ nav a → LINK 1 ✓ LINK 2 ✗ LINK 3 ✗

Why this pair matters in real stylesheets: nav links normally must look different from body links — no underline, brand colour, bold. With only element selectors you cannot say that: a would drag your article and footer links along with it. The descendant selector is how you keep one tag and two different looks, without inventing a single class.

grouped-demo.html · complete file, from scratchSTEP 1 HTML GROWS · THEN CSS GROWS
1<!DOCTYPE html>
2<html lang="en">
3<head> <meta charset="UTF-8"> <title>The grouped selector</title> </head>
4<body>
5  <h1>Poshtik Campus Menu</h1>
6  <h2>Today's Healthy Ten</h2>
7  <h3>Jonna Rotte Wrap</h3>  <!-- three heading levels, all plain -->
8</body>
9</html>
·/* HTML is complete & plain above. Now add the <style> rule ↓ */
10  h1, h2, h3 { color: darkslategray; }  /* GROUPED — comma = a LIST: h1s AND h2s AND h3s */
··/* NOT the same as:  h1 h2 h3 { … }  — no commas = descendant chain: */
··/* "h3 inside h2 inside h1" = matches nothing                        */

THIS OUTPUT IS REAL — HTML GROWS PLAIN, THEN THE RULE

grouped-demo.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/grouped-demo.html

Poshtik Campus Menu h1

Today's Healthy Ten h2

Jonna Rotte Wrap h3

First the three headings grow as plain black HTML, one per press. The last press adds the single h1, h2, h3 rule — all three turn darkslategray at once.

One rule, three heading levels — and when the brand colour changes, you edit one line. The comma is a "me too" list; the space is a "look inside" instruction. Opposite meanings, one keyboard row apart.

EXTRA EXAMPLE 2 The same lesson at a different tag: p vs article p.

One example is never enough to kill a confusion — the pattern has to repeat at a different tag before it feels like a rule instead of a trick. Same shape as Example 1, new cast: four paragraphs, two of them inside an <article>, one in the footer, one loose in the body. Predict the two counts before you press: how many does p hit, and how many does article p hit?

p-vs-article-p.html · complete file, from scratchHTML GROWS · THEN RULE 1 · THEN RULE 2
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>p vs article p</title>
7</head>
8<body>
9  <p>Poshtik Campus — healthy food, hostel prices.</p>  <!-- P1 · loose in body -->
10  <article>
11    <p>Ragi Idli Bowl — steamed, not fried.</p>  <!-- P2 · INSIDE the article -->
12    <p>Pesarattu with Sprouts — Andhra classic.</p>  <!-- P3 · INSIDE the article -->
13  </article>
14  <footer><p>© 2026 Poshtik Campus</p></footer>  <!-- P4 · in the footer -->
15</body>
16</html>
·/* Four plain paragraphs on screen. Now the <style> inside <head> ↓ */
7  <style>
8    p              /* ONE part → ALL 4 paragraphs, footer included */
9    {
10      color: gray;
11    }
12    article p      /* TWO parts → only P2 + P3 (the ones inside) */
13    {
14      color: seagreen;
15    }
16  </style>

THIS OUTPUT IS REAL — 4 OF 4, THEN 2 OF 4

p-vs-article-p.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/p-vs-article-p.html

Poshtik Campus — healthy food, hostel prices. ← P1 · loose in body

Ragi Idli Bowl — steamed, not fried. ← P2 · inside article

Pesarattu with Sprouts — Andhra classic. ← P3 · inside article

The gray bar on the left marks the <article>'s territory. Rule 1 grays all four. Rule 2 turns only the two inside the bar seagreen — P1 and P4 keep the gray they were given, because article p never even looked at them.

Both rules applied — and they did not fight. P1 and P4 obey rule 1; P2 and P3 obey rule 2 (a two-part selector is more specific than a one-part one, exactly as Activity 2 will show you in DevTools). This is the everyday professional pattern: one broad element rule for the whole site, then narrow descendant rules for special zones.

p → P1 ✓ P2 ✓ P3 ✓ P4 ✓ (4 of 4) article p → P1 ✗ P2 ✓ P3 ✓ P4 ✗ (2 of 4)

EXTRA EXAMPLE 3 The left side does not have to be a tag: .dish h3.

Here is the part that quietly unlocks real stylesheets: a descendant selector's parts can be any selector you already know — element, .class, or #id, in any mix. .dish h3 reads right-to-left as "h3 elements, but only those inside something with class dish." Two dish cards carry an <h3>; so does the page's "About us" section, which is not a dish. Watch the About heading get skipped.

dish-h3.html · complete file, from scratchHTML GROWS · THEN RULE 1 · THEN RULE 2
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Class + descendant</title>
7</head>
8<body>
9  <article class="dish"><h3>Ragi Idli Bowl</h3></article>   <!-- H3 inside .dish -->
10  <article class="dish"><h3>Jonna Rotte Wrap</h3></article>  <!-- H3 inside .dish -->
11  <section><h3>About us</h3></section>  <!-- an h3, but NOT inside .dish -->
12</body>
13</html>
·/* Three plain h3s on screen. Now the <style> inside <head> ↓ */
7  <style>
8    h3             /* ALL 3 headings — About included */
9    {
10      color: dimgray;
11    }
12    .dish h3       /* only the 2 dish titles */
13    {
14      color: seagreen;
15      font-style: italic;
16    }
17  </style>

THIS OUTPUT IS REAL — THE "ABOUT US" H3 IS SKIPPED

dish-h3.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/dish-h3.html

Ragi Idli Bowl

Jonna Rotte Wrap

About us

<section> — no class="dish"

Rule 1 grays all three headings. Rule 2 turns the two inside a .dish box seagreen and italic — "About us" stays gray, because its box has no class="dish" and the second test fails.

This is the combination the exam loves: .dish h3 is a class selector and an element selector joined by the "inside" space. Say it right-to-left — "h3 … inside a .dish" — and note again that the .dish box itself gets nothing; only its heading is dressed.

GOING DEEPER — WHY NOT JUST ADD A CLASS TO EVERY HEADING?

You could write class="dish-title" on each <h3> and select that instead — and it would work. But on a ten-dish menu that is ten extra attributes to type, and eleven the day a dish is added. .dish h3 says the same thing once and covers every dish card that will ever exist. Descendant selectors are how you stop editing HTML every time you want a new style.

EXTRA EXAMPLE 4 · TRAP "Inside" means anywhere inside — not "directly inside".

This is the second half of the confusion, and it costs marks: students accept that nav a means "a inside nav", then quietly assume it means immediately inside — a direct child. It does not. A descendant selector reaches every level down: a child, a grandchild, a great-grandchild, forever. Here the link is buried three levels deep — nav → ul → li → a — and nav a still finds it.

how-deep.html · complete file, from scratchHTML GROWS — WATCH THE NESTING
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>How deep does inside go?</title>
7</head>
8<body>
9  <nav>                        <!-- LEVEL 0 · the nav -->
10    <ul>                      <!-- LEVEL 1 · a list inside the nav -->
11      <li>                    <!-- LEVEL 2 · a list item -->
12        <a href="menu.html">Menu</a>  <!-- LEVEL 3 · the link, 3 deep -->
13      </li>
14    </ul>
15  </nav>
16  <a href="help.html">Help</a>       <!-- OUTSIDE the nav entirely -->
17</body>
18</html>
·/* Both links plain. The SAME rule from the first demo, in <head> ↓ */
7  <style>
8    nav a          /* still reaches 3 levels down */
9    {
10      color: seagreen;
11      font-weight: bold;
12    }
13  </style>

THIS OUTPUT IS REAL — THE BURIED LINK IS STILL FOUND

how-deep.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/how-deep.html

<nav> — level 0

<ul> — level 1

<li> — level 2

Menu ← level 3 · still "inside the nav" ✓

Help ← outside the nav ✗ · never matched

The green bar is the nav's territory; each gray bar is one level deeper. The last press adds nav a — the Menu link goes seagreen even though two whole elements sit between it and the nav. Help, one line below and outside the bar, is untouched.

Depth is irrelevant; containment is everything. The browser asks only "is there a <nav> somewhere above this link in the family tree?" — one level or ten, the answer is yes and the rule applies. (A selector that does insist on "directly inside" exists — nav > a, the child selector — and it is not in your five; recognise it, don't use it yet.)

The exam trap, stated plainly: "descendant" is a family word, not a distance word. Your grandchild is your descendant. If a question shows you a link inside a <ul> inside a <nav> and asks whether nav a matches, the answer is yes — and half the class writes "no, it's not a direct child."

EXTRA EXAMPLE 5 · THE TWINS Two files. Identical HTML. The CSS differs by one character.

The cruellest version of this confusion is not descendant-vs-element — it is descendant-vs-grouped, because a space and a comma sit one keyboard key apart and both "look fine". So here are twins: the same page, styled by .dish p in one file and .dish, p in the other. One paints the description inside the card. The other paints the card itself and every paragraph on the page. Same eight characters, plus or minus a comma.

twin-A-space.html · complete file, from scratchHTML GROWS · THEN ONE RULE
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Twin A — space</title>
7</head>
8<body>
9  <article class="dish"><p>Steamed, not fried.</p></article>  <!-- p INSIDE .dish -->
10  <p>Prices include all taxes.</p>  <!-- p OUTSIDE any .dish -->
11</body>
12</html>
·/* Now the rule, in <head> — note the SPACE, no comma ↓ */
7  <style>
8    .dish p        /* "p inside .dish" — ONE target */
9    {
10      background-color: gold;
11    }
12  </style>

TWIN A · SPACE — 1 THING PAINTED

twin-A-space.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/twin-A-space.html

Steamed, not fried.

Prices include all taxes. ← outside the card

Exactly one thing goes gold: the paragraph inside the dashed card. The card itself stays unpainted, and so does the paragraph below it.

SPACE = "inside". One target: the card's own paragraph. The .dish box was only an address, never a target.

twin-B-comma.html · complete file, from scratchSAME HTML · ONE COMMA ADDED
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Twin B — comma</title>
7</head>
8<body>
9  <article class="dish"><p>Steamed, not fried.</p></article>  <!-- byte-identical to Twin A -->
10  <p>Prices include all taxes.</p>  <!-- byte-identical to Twin A -->
11</body>
12</html>
·/* Same rule — ONE comma added after .dish ↓ */
7  <style>
8    .dish, p       /* "every .dish AND every p" — THREE targets */
9    {
10      background-color: gold;
11    }
12  </style>

TWIN B · COMMA — 3 THINGS PAINTED

twin-B-comma.html

file:///C:/Users/student/Desktop/fswd-practice/class-09/twin-B-comma.html

Steamed, not fried.

Prices include all taxes. ← painted too!

Three things go gold: the card (because it is a .dish), its paragraph (because it is a p), and the paragraph below (also a p). The whole block floods — this is what students see when they "just add a comma to be safe".

COMMA = "and also". Three targets, and the .dish box is now a target in its own right. If your page ever floods with a style you meant for one small thing, look for a stray comma first — it is the single most common CSS accident of week one.

THE TWINS, SIDE BY SIDE — WRITE THIS ROW IN YOUR NOTEBOOK

.dish␠p

DESCENDANT · 1 TARGET"paragraphs inside a dish card" — a filter. The set gets smaller as you add parts. The .dish itself is never styled.

.dish, p

GROUPED · 3 TARGETS"every dish card and also every paragraph" — a list. The set gets bigger as you add parts. Both named things are styled.

The 3-second exam check: is there a comma? Yes → it is a LIST, count each part separately and add the matches. No → it is a PATH, read right-to-left and style only the last part.

Your five-selector kit is complete: element · .class · #id · descendant (space) · grouped (comma) — exactly the five the PYQ demands, every one now practised against a menu page you typed yourself. Selector № 6 (:hover and friends) is previewed in Part 12, taught properly later.

GOING DEEPER — SELECTORS COMBINE FREELY

The five types are LEGO bricks, not sealed boxes: .dish h3 (descendant of a class) means "h3s inside dish cards"; nav a, footer a (grouping two descendants) means "links in the nav AND links in the footer". Read any combined selector right-to-left with the space as "inside" and the comma as "and also" — it decodes every selector you'll meet this semester.

ACTIVITY 2 · DEVTOOLS INSPECTION · ~8 MINUTES

Two rules want the same heading. Who wins — and how do you see it?

After Activity 1 your stylesheet holds a trap you built yourself without noticing: the h1, h3 rule paints headings seagreen — but the #page-header rule makes everything inside the header white. The <h1> sits inside the header. Two rules, one element, one colour on screen. DevTools shows the fight.

THE INSPECTION, STEP BY STEP

STEP 1

Open menu-practice.html (Activity 1's page, gaps filled) in Chrome (Live Server or double-click — either works for inspecting).

STEP 2

Right-click the big "Poshtik Campus Menu" heading → Inspect. DevTools opens with that exact <h1> (line 9 of the file you typed) highlighted in the Elements panel.

STEP 3

Look at the Styles panel on the right. Find every rule that mentions color for this element. Count them.

ANSWER

Write down: (a) what colour the h1 actually is on screen, (b) which rule won, (c) what the Styles panel does to the losing declaration's text. Then open the solution.

Why this matters beyond today: "my CSS isn't applying!" is the single most common beginner cry — and it's almost never a typo. It's a lost fight you didn't know was happening. The Styles panel is the referee's scoreboard: from today, you never guess why a style didn't land — you look.

Actually right-click and inspect first. The panel teaches your eyes things this page can only describe.

SOLUTION SHEET · ACTIVITY 2

The annotated Styles panel.

CHROME DEVTOOLS — INSPECTING <h1> INSIDE #page-header

StylesComputedLayout

style-start.css:28 h1, h3 {
color: seagreen; ← struck through = LOST
}

style-start.css:19 #page-header {
color: white; ← alive = WON (inherited by the h1)
background-color: darkslategray;
}

The h1 renders white. The struck-through line is DevTools' way of saying "this declaration applied, competed, and lost." Nothing is broken — a fight was resolved.

Why did #page-header win? The short version you can hold today: an id selector is more specific than an element selector — CSS trusts the rule that identifies its target more precisely. The full ranking system is called specificity, and it gets its own proper treatment with the cascade in a later class. Today's takeaway is the skill, not the formula: when two rules fight, DevTools shows you the fight — and the strikethrough names the loser.

GOING DEEPER — TRY THE REFEREE YOURSELF

In the Styles panel, click the white value and type gold — the heading changes instantly, without touching your file. This is how professionals prototype: experiment live in DevTools, then copy the winner into the real stylesheet. Refresh and the experiment vanishes — DevTools edits are a whiteboard, never a save.

SELF-STUDY · A PREVIEW, NOT A LESSON

Selector № 6 exists — states, not elements.

Everything today selected elements by what they are. There's a sixth family that selects by what state they're in: pseudo-classes, written with a colon. Two names to recognise now — full treatment comes with the properties classes.

hover-taste.html · complete file, from scratchBUILDS ONE PRESS AT A TIME
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>A taste of :hover</title>
6  <style>
7    .dish { background-color: mintcream; border: 2px solid seagreen; padding: 6px 10px; }
8    .dish:hover  /* "a .dish — but only WHILE the mouse pointer is over it" */
9    {
10      background-color: palegreen;  /* palegreen — clearly lighter */
11    }
12  </style>
13</head>
14<body>
15  <article class="dish">Jonna Rotte Wrap</article>  <!-- hover it — same element, new STATE -->
16  <article class="dish">Ragi Idli Bowl</article>
17  <article class="dish">Pesarattu with Sprouts</article>
18</body>
19</html>
··/* also meet: li:first-child — "an li that is its parent's first child" */

THIS OUTPUT IS REAL — MOUSE OVER THE CARDS

hover-taste.html — mouse over a card

file:///C:/Users/student/Desktop/fswd-practice/class-09/hover-taste.html

The style follows YOUR mouse — try it above: each card runs the exact .dish:hover rule from the panel — mintcream at rest, palegreen while hovered, back the instant the pointer leaves. No JavaScript involved; CSS handles simple interactivity by itself.

Correctly flagged as deferred: pseudo-classes are named today only so the colon syntax doesn't ambush you in DevTools or online examples. They are not in today's PYQ's expected five, and you won't be asked to write one yet. If you're curious tonight, add the .dish:hover rule above to your own style-start.css — it works right now.

Take it home

Your selector kit — the whole class on one card.

SELECTOR	WRITTEN AS	SELECTS	POSHTIK EXAMPLE
Element	`p`	Every element with that tag name	`p { color: gray; }` — every paragraph
Class	`.dish`	All elements sharing `class="dish"` — a family you define	`.dish { border: 2px solid green; }` — all ten cards
ID	`#page-header`	The ONE element with that id (unique per page)	`#page-header { color: white; }` — the header
Descendant	`nav a` (space)	Matches of the right part inside the left part	`nav a { color: green; }` — nav links only
Grouped	`h1, h3` (comma)	Everything each listed selector matches — "and also"	`h1, h3 { color: green; }` — both heading kinds
Pseudo-class	`.dish:hover`	Elements in a state — preview only, taught later	`.dish:hover { … }` — while the mouse is over

Class 9 · closed

Your site can find any element it wants to dress. Next: the wardrobe.

Today you learned the who of CSS — five ways to aim a rule, practised on a live menu page you typed yourself, plus the referee's scoreboard when two rules fight. Class 10 brings the what: colours, fonts, text properties, and the site-wide style.css idea — one sheet, many pages. The selectors you aimed today are the hooks everything from here to Unit 5 hangs on.

Before next class: finish both Activity files if you haven't — menu-practice.html + filled style-start.css, transforming live.
Five-minute drill: without notes, write the five selector types with one example each — that's the PYQ, cold.
Optional taste: add the .dish:hover rule and feel your menu respond to the mouse.

Next · Class 10 — properties, values & style.css Back · Class 8 All Unit 1 sessions