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.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Read the stylesheet 8 min · Change one rule 8 min · Menu links 10 min · Cards 12 min · Fix the card 5 min
This is a review lesson: nothing new is taught, and each step uses ideas from earlier lessons. Do the cards step yourself first (about 5 minutes).
The page is a whole document, with the page wrapper from Course A (<!DOCTYPE html>, <head> with the <style> block, <body>). Only the <body> shows. The stylesheet has a group rule, a tag rule that comes after it, a class rule, and later a descendant rule (nav a) and a card class. Students use rules that combine, links in a menu, block and inline boxes, and the box in one page.
h2 rule changed. A student who changes the group rule to orange sees the headings stay teal, because the later rule still wins.nav a picks before they write it. The link in the story must keep its underline..card rule.On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.
Look at the two heading rules. With your partner, say what colour the title and the section headings are, and why.
Listen for the later rule wins. Some will say the first rule. Ask what each rule's selector picks.
Swap stylesheets with a partner. Point at each rule and say the job it does, and which elements it changes.
A student who cannot say what a rule changes is a good prompt to ask what its selector picks.
Choosing which rule to change. Ask them to name the job first, then point to the rule that does it before they type.
| What you will see | A question to ask | The fix |
|---|---|---|
| The headings stay teal after changing a colour. | Which rule comes last for the h2 headings? | Change the h2 rule that comes after the group rule, or the later rule still wins. |
| Every link on the page lost its underline. | Is the selector nav a, or just a? | Write nav a, with a space, so only links inside the nav change. |
| The cards do not change. | Does the class name in the tags match the name after the dot exactly? | Use class="card" on each section, and .card in the CSS with a dot. |
One possible solution for each task. Other correct programs are fine.
<!DOCTYPE html>
<html>
<head>
<title>School newsletter</title>
<style>
body {
font-family: sans-serif;
}
h1, h2 {
color: navy;
}
h2 {
color: orange;
}
.note {
background-color: lightyellow;
}
</style>
</head>
<body>
<header>
<h1>Library news</h1>
</header>
<main>
<section>
<h2>New books</h2>
<p>The library has 200 new books this term.</p>
</section>
<section>
<h2>Book fair</h2>
<p class="note">The book fair starts on Monday in the library.</p>
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>School newsletter</title>
<style>
body {
font-family: sans-serif;
}
h1, h2 {
color: navy;
}
h2 {
color: orange;
}
.note {
background-color: lightpink;
}
</style>
</head>
<body>
<header>
<h1>Library news</h1>
</header>
<main>
<section>
<h2>New books</h2>
<p>The library has 200 new books this term.</p>
</section>
<section>
<h2>Book fair</h2>
<p class="note">The book fair starts on Monday in the library.</p>
</section>
</main>
</body>
</html>
Open task: any program that does what the step asks.
Open task: any program that does what the step asks.
<!DOCTYPE html>
<html>
<head>
<title>School newsletter</title>
<style>
body {
font-family: sans-serif;
}
h1, h2 {
color: navy;
}
h2 {
color: teal;
}
header {
background-color: lightblue;
padding: 16px;
}
nav a {
color: navy;
text-decoration: none;
}
</style>
</head>
<body>
<header>
<h1>Library news</h1>
<nav>
<a href="https://example.com/home">Home</a>
<a href="https://example.com/events">Events</a>
<a href="https://example.com/join">Join</a>
</nav>
</header>
<main>
<section>
<h2>New books</h2>
<p>The library has 200 new books this term. See the <a href="https://example.com/list">full list</a>.</p>
</section>
</main>
</body>
</html>
Open task: any program that does what the step asks.
<!DOCTYPE html>
<html>
<head>
<title>School newsletter</title>
<style>
body {
font-family: sans-serif;
}
h1, h2 {
color: navy;
}
h2 {
color: teal;
}
</style>
</head>
<body>
<header>
<h1>Library news</h1>
</header>
<main>
<section class="card">
<h2>New books</h2>
<p>The library has 200 new books this term.</p>
</section>
<section class="card">
<h2>Book fair</h2>
<p>The book fair starts on Monday in the library.</p>
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>School newsletter</title>
<style>
body {
font-family: sans-serif;
}
h1, h2 {
color: navy;
}
h2 {
color: teal;
}
.card {
padding: 16px;
border: 2px solid gray;
margin: 16px 0;
}
</style>
</head>
<body>
<header>
<h1>Library news</h1>
</header>
<main>
<section class="card">
<h2>New books</h2>
<p>The library has 200 new books this term.</p>
</section>
<section class="card">
<h2>Book fair</h2>
<p>The book fair starts on Monday in the library.</p>
</section>
</main>
</body>
</html>
Stretch: Add a second class, `.featured`, with a different border colour, and put it on the headline section as well as card. Which border wins, and why?
Support: Give students only the Change one rule and Turn the sections into cards steps, and a copy of the page with the class already on both sections.
A page has h1, h2 { color: navy; } and then h2 { color: teal; }. What colour is an h2, and what colour is the h1?
The h2 is teal, because the later rule wins where both set the colour. The h1 matches only the first rule, so it is navy.
Next unit is Layout: Flexbox puts boxes in a row, such as a menu. Class idea: ask students to find three cards on a real website and sketch their padding, border and margin.