Specificity and the cascade

A score that determines which CSS rule wins when multiple rules target the same element; higher score beats lower

Part of: HTML and CSS Journey — Module 39

What it does: When two rules have identical specificity, the one declared later in the stylesheet wins — here 'color: red' overrides 'color: black'. A class selector scores 0,0,1,0 while an element selector scores 0,0,0,1, so .note beats a plain 'p' rule. ID selectors score 0,1,0,0 while class selectors score 0,0,1,0 — IDs always win over classes. Source order is the tiebreaker — the later rule overrides the earlier one. !important overrides even inline styles, sitting at the very top of the cascade. Class selectors have higher specificity than element (type) selectors. CSS declarations must end with a semicolon. 'color: black' with no semicolon is a common error that can cause subsequent declarations to be ignored.

Common mistakes: The '.box' rule is missing a semicolon after 'green' — it should be 'color: green;'. 'colour' is not a valid CSS property — the correct spelling is 'color'.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Specificity and the cascade (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which selector type has the highest specificity score?

ID selector (#id)Class selector (.class)

Matches

p { color: black }

↓

Missing semicolon after the declaration value

Applying

Meanings

Term

specificity

Meaning

A score that determines which CSS rule wins when multiple rules target the same element; higher score beats lower

Practice

p {

Testing

Gaps

p { red; }

Check Answer

Spots

1.box { color: green }

2.note { color: blue; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which selector type has the highest specificity score?

A. ID selector (#id) ✓

B. Class selector (.class)

ID selectors score 0,1,0,0 while class selectors score 0,0,1,0 — IDs always win over classes.

2. Two rules target the same element with equal specificity. Which rule applies?

A. The rule written first in the stylesheet

B. The rule written last in the stylesheet ✓

Source order is the tiebreaker — the later rule overrides the earlier one.

3. Does !important override an inline style?

A. Yes — !important beats inline styles ✓

B. No — inline styles always win

!important overrides even inline styles, sitting at the very top of the cascade.

4. Which rule wins: 'p { color: blue; }' or '.text { color: red; }'?

A. p { color: blue; }

B. .text { color: red; } ✓

A class selector (0,0,1,0) outscores an element selector (0,0,0,1).

5. An element selector and a class selector both target the same element. Which wins?

A. Element selector

B. Class selector ✓

Class selectors have higher specificity than element (type) selectors.

Match the Pairs

#hero { color: red; } → ID selector — highest specificity among selectors

color: blue !important; → Forces this declaration to override all other rules, including IDs

Cascade source order tiebreaker → p { color: black; } p { color: red; }

Class selector specificity beats element selector → .note { color: green; }

p { color: black } → Missing semicolon after the declaration value

.box { color: red !importent; } → !important is misspelled — the browser ignores the keyword

Key Term

specificity

A score that determines which CSS rule wins when multiple rules target the same element; higher score beats lower

Fill in the Blanks

1. p { color: red; }

Hint: Type the CSS property name for text colour

2. #nav { color: blue; }

Hint: Type an ID selector for an element with id='nav'

3. .intro { color: green; }

Hint: Type a class selector for elements with class='intro'

4. h1, p { font-size: 16px; }

Hint: Type the CSS property that sets text size

5. body { color: black !important; }

Hint: Type the keyword that forces this rule to override all others

Spot the Error

Question 1

A .box { color: green }

B .note { color: blue; }

C #main { color: red; }

Line A — The '.box' rule is missing a semicolon after 'green' — it should be 'color: green;'.

Question 2

A p { color: black; }

B .intro { colour: blue; }

C #hero { color: red; }

Line B — 'colour' is not a valid CSS property — the correct spelling is 'color'.

Question 3

A h2 { font-size: 24px; }

B .title { font-size: 20px; }

C #hero { font-size 32px; }

Line C — The colon is missing after 'font-size' in the '#hero' rule — it should be 'font-size: 32px;'.

Question 4

A body { background: white; }

B p { color: gray; }

C .box { color: green; }

D h1 { color: black !importnt; }

Line D — '!importnt' is a typo — the correct keyword is '!important'.

Question 5

A #header { color: navy; }

B p { color: black; }

C .nav { color: teal; }

D h2 { font-size: 20px; }

E span color: gray; }

Line E — The 'span' rule is missing its opening curly brace — it should be 'span { color: gray; }'.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?