10 Multimedia · 2026
Week 4 · Lesson 07

CSS Basics — Selectors, Cascade, Specificity

Week 4 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-3IND5-4

Learning intentions

  • I can link an external CSS stylesheet to an HTML file.
  • I can use element, class, and id selectors — and explain which one wins when they conflict.
  • I can read the specificity weight of a selector (like 0-1-0).
  • I can use hex, rgb, and hsl colour values in CSS.

Success criteria

  • My HTML has <link rel="stylesheet" href="styles.css"> in the head.
  • My CSS file uses all 3 selector types (element, class, id) at least once each.
  • I can state the specificity weight of any selector in 0-0-0 notation.
  • My page has a chosen colour palette written in hex codes.

Do Now · 5 min

Last lesson your HTML page looked like 1995. Today that ends.

Open your most recent HTML file. In your head, imagine it with:

Prediction: If I write two CSS rules for the same element — which one wins?

I Do · ~10 min Teacher demonstration

Step 1 — Link a stylesheet

<!-- inside the HTML head -->
<link rel="stylesheet" href="styles.css">

Step 2 — The 3 selector types (every CSS selector is one of these)

/* TYPE selector — affects every p tag on the page */
p {
  color: #333;
  font-size: 18px;
  line-height: 1.6;
}

/* CLASS selector — only elements with class="highlight" */
.highlight {
  background-color: #fef3c7;
  padding: 4px 8px;
  border-radius: 4px;
}

/* ID selector — only the ONE element with id="main-title" */
#main-title {
  color: #1f3a68;
  font-size: 48px;
}

Step 3 — When two rules conflict, specificity decides the winner

Specificity weight notation (read left to right, IDs–Classes–Elements):
  • p = 0-0-1 (one element)
  • .highlight = 0-1-0 (one class)
  • #main-title = 1-0-0 (one id)
  • article p.intro = 0-1-2 (two elements + one class)
Higher wins. 1-0-0 beats 0-1-0 beats 0-0-1, regardless of which comes first.

Step 4 — The cascade (when specificity ties)

If specificity is equal, the LAST rule in the stylesheet wins. That's why it's called "Cascading Style Sheets" — rules flow top to bottom.

p { color: orange; }   /* loses */
p { color: green; }    /* wins — declared later with equal specificity */
The "avoid IDs in CSS" rule: because #id specificity (1-0-0) beats every class combination, professionals avoid styling by id. Use classes for style, ids for same-page anchors only.

Step 5 — Colour formats you'll actually use

color: #1f3a68;                /* hex - most common */
color: rgb(31, 58, 104);       /* red, green, blue 0-255 */
color: rgba(31, 58, 104, 0.8); /* same + alpha (transparency) */
color: hsl(220, 54%, 26%);     /* hue, saturation, lightness */

We Do · ~15 min Guided build

Together on the exemplar page, we'll:

  1. Write p { color: red; } — watch all p go red.
  2. Add <p class="note">...</p> and write .note { color: blue; } — prediction: which p goes blue?
  3. Add #important { color: orange; } to one specific p — prediction: which colour wins?
  4. DevTools Styles panel: see CROSSED-OUT rules — that's specificity losing in real time.

You Do · ~35 min Independent practice

Open your L04 semantic HTML file. Create styles.css in the same folder. Link it.

Apply at least 10 CSS rules including:

  1. A body background colour (hex)
  2. A body text colour (hex)
  3. font-family on body (with fallback: 'Inter', sans-serif)
  4. Heading styles for h1 AND h2 (different sizes)
  5. Link colour AND hover colour
  6. A class selector (e.g. .intro) that overrides the body colour
  7. An id selector (e.g. #profile-photo) styled differently
  8. A rule for ul or li
  9. A rule using rgba() with transparency
  10. A comment explaining one of your decisions

Extension: Write a rule that you expect to LOSE due to specificity — then confirm in DevTools that it's crossed out.

Differentiation

Support

Empty styles.css with 10 commented TODOs provided; student fills in values only.

Core

10-rule stylesheet from scratch using all 3 selector types.

Extension

Research :hover, :first-child, :nth-child(even) pseudo-classes on MDN. Use one with a comment explaining specificity impact (pseudo-classes add 0-1-0).

Exit Ticket · 5 min

Exit ticket

1. What specificity weight is each of these?

a) article = ____-____-____

b) .hero = ____-____-____

c) #logo = ____-____-____

d) nav a.active = ____-____-____

2. Two rules both apply. Rule A: .text { color: red; }. Rule B: p { color: blue; }. Which wins? Why?

_______________________________________________________

3. Paste your favourite CSS rule from today:

_______________________________________________________

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.