STEP 5 — COMPOUND RULES

This week is the first real conceptual leap: styling the same element differently depending on which box it sits in. Our standard is the box (div / element) first, then the thing inside the box.

How to read this page: first come the instructions — what to do this week, with the video. After the instructions, one gray-blue box gathers all the material for your Step 5 page — rewrite it in your own words. Text shown as code is the kind of thing you type onto your page.

 

INSTRUCTIONS

1 · Watch: compound rules for text

Watch the video, then read the material below before you write any CSS. The whole idea rests on one habit: name the box first, then the thing inside it.



2 · Style the same tag two ways

On your page, prove the concept to yourself: write a compound rule that styles an h1 inside the header one way, and another that styles an h1 inside main a different way. When the same tag looks different in two places, you have understood compound rules.

 

MATERIAL FOR YOUR STEP 5 PAGE

Everything inside the gray-blue box below is what you rewrite, in your own words, onto your step5.html page.

The box first, then the thing inside

A compound rule names a box, then the thing inside it. header h1 styles only the h1 headings that sit inside a header — not every h1 on the page. The last thing listed is what actually gets styled; everything before it just says which box it must sit inside.

header h1 {
  font-size: 3em;
  color: #ffffff;
}

main h1 {
  font-size: 2em;
  color: blue;
}

A space is not a comma

footer h1 (a space) reaches h1s inside footers. footer, h1 (a comma) styles all footers AND all h1s — a completely different meaning. And a compound rule doesn’t leak: header h1 never touches an h1 in the footer.

When it beats the last guy

“Last guy wins” is the tiebreaker between equal rules. A compound rule like header h1 is more specific than a plain h1 rule, so it wins even if the plain rule sits lower in the file. Specificity beats position.

 
 

Work Due — Friday, October 9

Build your step5.html page — your own notes on compound rules, the box-first standard, space-vs-comma, and how a compound rule beats a later plain rule. Include a working header h1 and main h1 that look different from each other. Upload it to your site.