---
marp: true
theme: default
html: true
---
# Turn the newsletter into cards
Layout and components · Boxes
---
## Today
**We are learning to** read a longer stylesheet, find the rule that does a job, and change just that rule.
- I can find the rule in a stylesheet that does a job and change just that rule.
- I can say which rule wins when two rules set the same property.
- I can style the links in a menu with nav a.
- I can give several elements a shared class with padding and a border.
---
## Why it matters
> A stylesheet grows rule by rule, and the skill is finding the one rule that does the job you want to change.
---
💬 Discussion
## Which rule wins? (3 min)
Look at the two heading rules. With your partner, say what colour the title and the section headings are, and why.
---
💬 Discussion
## Investigate: Read the stylesheet
_The program is 36 lines long: open it in the tutorial and read it together._
[Open this step](https://studio.learningwaypoints.com/tutorials/code/css/css-newsletter/?full=step-1#step-1)
---
✅ Check
## Match the rules
**Match each rule with what it changes.**
| | |
|---|---|
| `body { font-family: sans-serif; }` | A. one rule for the title and the section headings |
| `h1, h2 { color: navy; }` | B. the background of the paragraphs marked note |
| `h2 { color: teal; }` | C. the typeface of all the text on the page |
| `.note { background-color: lightyellow; }` | D. a later rule that changes the colour of the section headings only |
* Answer: body { font-family: sans-serif; } → C. the typeface of all the text on the page; h1, h2 { color: navy; } → A. one rule for the title and the section headings; h2 { color: teal; } → D. a later rule that changes the colour of the section headings only; .note { background-color: lightyellow; } → B. the background of the paragraphs marked note
---
✅ Check
## Two rules, one heading
**Both h1, h2 { color: navy; } and h2 { color: teal; } match the Book fair heading. What colour is it?**
- Teal, because the later rule wins where both set the colour
- Navy, because the first rule that matches is the one that counts
- Black, because two rules cancel each other out
- Half navy and half teal
* Answer: Teal, because the later rule wins where both set the colour
---
✍️ Activity
## Change one rule
- **The headings:** Make the section headings orange without changing the title.
- **The note:** Make the paragraph marked `note` stand out in `lightpink`.
---
✍️ Activity
## Live: Change one rule
{{embed: https://studio.learningwaypoints.com/tutorials/_playground-html/index.html?code=%3C%21DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A++%3Ctitle%3ESchool+newsletter%3C%2Ftitle%3E%0A++%3Cstyle%3E%0A++++body+%7B%0A++++++font-family%3A+sans-serif%3B%0A++++%7D%0A++++h1%2C+h2+%7B%0A++++++color%3A+navy%3B%0A++++%7D%0A++++h2+%7B%0A++++++color%3A+teal%3B%0A++++%7D%0A++++.note+%7B%0A++++++background-color%3A+lightyellow%3B%0A++++%7D%0A++%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cheader%3E%0A++%3Ch1%3ELibrary+news%3C%2Fh1%3E%0A%3C%2Fheader%3E%0A%3Cmain%3E%0A++%3Csection%3E%0A++++%3Ch2%3ENew+books%3C%2Fh2%3E%0A++++%3Cp%3EThe+library+has+200+new+books+this+term.%3C%2Fp%3E%0A++%3C%2Fsection%3E%0A++%3Csection%3E%0A++++%3Ch2%3EBook+fair%3C%2Fh2%3E%0A++++%3Cp+class%3D%22note%22%3EThe+book+fair+starts+on+Monday+in+the+library.%3C%2Fp%3E%0A++%3C%2Fsection%3E%0A%3C%2Fmain%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A}}
_If it does not load:_ [open this step in the tutorial](https://studio.learningwaypoints.com/tutorials/code/css/css-newsletter/?full=step-2#step-2)
---
✍️ Activity
## Style the menu links
- **Which rule?:** The menu is a `