Specificity and the cascade

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which selector type has the highest specificity score?

A Class selector (.class)

B ID selector (#id)

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

A The rule written last in the stylesheet

B The rule written first in the stylesheet

3. Does !important override an inline style?

A Yes — !important beats inline styles

B No — inline styles always win

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

A p { color: blue; }

B .text { color: red; }

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

A Class selector

B Element selector

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1#hero { color: red; }		AForces this declaration to override all other rules, including IDs
2color: blue !important;		B!important is misspelled — the browser ignores the keyword
3Cascade source order tiebreaker		Cp { color: black; } p { color: red; }
4Class selector specificity beats element selector		DID selector — highest specificity among selectors
5p { color: black }		EMissing semicolon after the declaration value
6.box { color: red !importent; }		F.note { color: green; }

Definitions

specificity

Fill in the Blanks

Complete each line of code by filling in the missing parts.

p { _____ red; }

____ { color: blue; }

______ { color: green; }

h1, p { _________ 16px; }

body { color: black __________; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .box { color: green }

B .note { color: blue; }

C #main { color: red; }

Question 2

A p { color: black; }

B .intro { colour: blue; }

C #hero { color: red; }

Question 3

A h2 { font-size: 24px; }

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

C #hero { font-size 32px; }

Question 4

A body { background: white; }

B p { color: gray; }

C .box { color: green; }

D h1 { color: black !importnt; }

Question 5

A #header { color: navy; }

B p { color: black; }

C .nav { color: teal; }

D h2 { font-size: 20px; }

E span color: gray; }

Answer Key

Specificity and the cascade

Section A: Quick Questions

B — ID selector (#id)

A — The rule written last in the stylesheet

A — Yes — !important beats inline styles

B — .text { color: red; }

A — Class selector

Section B: 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

Section C: Definitions

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

Section D: Fill in the Blanks

p { color: red; }

#nav { color: blue; }

.intro { color: green; }

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

body { color: black !important; }

Section E: Spot the Error

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

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

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

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

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