--- title: "Turn the newsletter into cards" subtitle: "Layout and components · Boxes · Lesson 5" --- # Turn the newsletter into cards **Name:** {{field-24}} **Date:** {{field-15}} **Class:** {{field-15}} > **Key question:** A stylesheet grows rule by rule, and the skill is finding the one rule that does the job you want to change. :::teacher-note **In one sentence:** Students read a whole newsletter stylesheet and change just the rule that does each job, using rules that combine, links in a menu, block and inline boxes, and the box. **Students should be able to say:** 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. **Width:** the unmarked parts are the floor every student does (predict, run, investigate and make). Typical adds the modify practice; wider adds the real-world contexts. They add contexts, not difficulty. Students work in the online tutorial alongside this sheet. ::: ## Read the stylesheet ```html School newsletter

Library news

New books

The library has 200 new books this term.

Book fair

The book fair starts on Monday in the library.

``` :::keep-together ### Match the rules **Match each rule with what it changes.** A. one rule for the title and the section headings B. the background of the paragraphs marked note C. the typeface of all the text on the page D. a later rule that changes the colour of the section headings only {{columns 60% 40%}} {{rows 1}} | Part | Letter | |---|---| | `body { font-family: sans-serif; }` | | | `h1, h2 { color: navy; }` | | | `h2 { color: teal; }` | | | `.note { background-color: lightyellow; }` | | ::: :::teacher-note **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 Each rule has a job. The group rule colours the title and the headings together, and the h2 rule that comes after it changes just the headings. ::: :::keep-together ### 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 ::: :::teacher-note **Answer:** Teal, because the later rule wins where both set the colour The heading matches both rules. Both set color, and with equal selectors the later rule wins, so the Book fair heading is teal. The title matches only the first rule, so it stays navy. ::: :::typical ## 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`. Work in the tutorial. Plan first: what will you change, and how will you test it? {{box-4}} :::teacher-note **One possible solution.** Other correct programs are fine; check that the program runs and does what the task asks. **The headings:** ```html School newsletter

Library news

New books

The library has 200 new books this term.

Book fair

The book fair starts on Monday in the library.

``` **The note:** ```html School newsletter

Library news

New books

The library has 200 new books this term.

Book fair

The book fair starts on Monday in the library.

``` ::: ::: :::typical ## Style the menu links **Which rule?.** The menu is a `