Selectors & the Cascade

Everything you built in Unit 1 already works — a browser reads your HTML and puts it on screen without complaint. It's also, structurally speaking, a house with exposed drywall and bare studs. Nobody's stopped you from moving in, but Unit 2 is where you paint the walls.

Two panes now

From this lesson on, your workspace grows a second pane: the styling sheet. The HTML pane still holds your frame; the styling sheet pane holds instructions for how that frame should look. Write a rule in the styling sheet, and the browser applies it to your HTML right away — no wiring required, that part is handled for you. (In a real project, a styling sheet like this usually lives in its own file, linked from the HTML — this workspace connects the two automatically so you can focus on the CSS itself.)

A CSS rule, up close

Here's one instruction in the styling sheet:

p { color: teal; }

Read it in three parts. p is the selector — which elements this rule applies to; here, every p on the page. The curly braces hold the declaration block: one or more property: value; pairs. color: teal; is one declaration — the property is color, the value is teal, and the semicolon ends it. A rule can hold more than one declaration:

p { color: teal; font-size: 18px; }

Naming one element: class selectors

An element selector like p grabs every paragraph on the page. To style just some of them, give the ones you mean a name in the HTML — a class — and select it with a dot:

<p class="highlight">Watch for loose gravel after the bridge.</p>

.highlight { color: crimson; }

class="highlight" is the label stuck on the element; .highlight (the dot matters — it means "class," not "tag") is how CSS finds it. Only that paragraph turns crimson; every other p stays whatever color the plain p rule gave it.

When rules disagree: the cascade

Picture two signs in a building: a general notice at the front desk ("quiet after 9pm"), and a handwritten note taped to one specific door ("actually, movie night, loud until midnight"). The specific note wins for that room, no matter which sign went up first — that's a class rule beating a plain tag rule.

But if two equally specific rules disagree — two class rules, say, both sitting on the same element — the one written later in the styling sheet wins. Order only breaks ties between equals; it never beats a more specific selector.

Common mistake

Forget a semicolon, and the browser doesn't complain — it just quietly folds your next declaration into the broken one and drops both. No error, no red underline, just a style that mysteriously never applies. If a rule seems to do nothing, check for a missing ; first.

You've got everything you need for a first real styling sheet. Go paint something.

Exercise

Style a trail note card

Below is a small card, already built. Style it with three rules, written in this order:

1. A p rule setting color to slategray and font-size to 18px — the baseline for every paragraph. 2. A .highlight rule setting color to crimson. 3. A .warning rule, written *after* .highlight, setting color to darkorange.

The last paragraph carries both classes (class="highlight warning"). Since .highlight and .warning are equally specific, whichever one you write last should win for that paragraph.