Students write CSS rules in a style block, find out that a tag selector styles every tag of that kind, and that a rule changes how a part looks, not what it is.
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.
Predict and Run 10 min · Investigate 10 min · Modify 12 min · Mix it up 5 min · Make 13 min
Read the unit primer "HTML structure in 5 minutes" (the CSS section) first, then do the Make task yourself.
New words: a rule is a selector followed by property lines in braces, p { color: teal; }. The selector (p) names a kind of tag; each line is a property, a colon, a value and a semicolon. Colours here are names such as teal and crimson. The <style> block sits at the top of the code for now; where it goes in a whole page comes later.
Link to the three layers idea from Digital systems: the words are content, the tags are structure, the rules are presentation.
p { } styles only the first paragraph, or that it needs to say which one. A rule names a kind of tag and changes every one. Only the two paragraphs turn teal. Ask a pair that said 1 what in the rule picks the first paragraph, and see if they can find it.p to h2 moves the colour. That is the whole idea of a selector.<h1> is still a heading.strong rule colours the important words.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.
Without changing the HTML, restyle the notice three ways: calm, loud and sporty. Show your partner.
Point out that the HTML is the same each time. Ask what stayed the same and what changed.
Believing a rule picks one element. Ask which tag the selector names, and how many of that tag are on the page, before you say.
| What you will see | A question to ask | The fix |
|---|---|---|
| A rule changes nothing, and there is no error. | Does the selector match a tag in the HTML, and is the rule inside the style block? | Write the selector as the tag name without angle brackets, as in p, and put every rule between <style> and </style>. |
| Only the first property in a rule works. | Does every property line end with a semicolon? | Add the missing ; after the value, as in color: teal; |
| The CSS shows on the page as text. | Is the CSS inside <style> and </style>? | Put every rule between <style> and </style> at the top of the page. |
One possible solution for each task. Other correct programs are fine.
<style>
h1 {
color: darkgreen;
}
</style>
<h1>Swimming carnival</h1>
<h2>When</h2>
<p>The carnival is on Thursday.</p>
<h2>What to bring</h2>
<p>Bring a towel and a hat.</p>
<style>
h1 {
color: darkgreen;
}
p {
font-size: 20px;
}
</style>
<h1>Swimming carnival</h1>
<h2>When</h2>
<p>The carnival is on Thursday.</p>
<h2>What to bring</h2>
<p>Bring a towel and a hat.</p>
<style>
h1 {
color: darkgreen;
}
p {
font-size: 20px;
}
h2 {
background-color: lightyellow;
text-align: center;
}
</style>
<h1>Swimming carnival</h1>
<h2>When</h2>
<p>The carnival is on Thursday.</p>
<h2>What to bring</h2>
<p>Bring a towel and a hat.</p>
<style>
h1 {
color: darkgreen;
}
p {
font-size: 20px;
font-family: sans-serif;
}
h2 {
background-color: lightyellow;
text-align: center;
}
</style>
<h1>Swimming carnival</h1>
<h2>When</h2>
<p>The carnival is on Thursday.</p>
<h2>What to bring</h2>
<p>Bring a towel and a hat.</p>
<style>
h1 {
color: purple;
font-size: 44px;
}
h2 {
color: teal;
background-color: lightyellow;
}
p {
font-family: sans-serif;
}
</style>
<h1>Spring concert</h1>
<h2>When and where</h2>
<p>The concert is on Wednesday at 6 pm in the hall.</p>
<h2>Who is playing</h2>
<p>The Year 7 band, the choir and the string group.</p>
<p>Tickets are free. Bring a friend!</p>
Stretch: Try font-size: 12px on the h1 and 60px on the p. Then ask whether the h1 is still a heading, and how a screen reader would know.
Support: Give students the Modify starter and do the second task together on the board: the selector, the braces, then one property line.
A rule h2 { color: purple; } is added to a page with four h2 headings. How many turn purple, and is any <h2> changed into something else?
All four turn purple, because the selector names the tag. None changes into something else: the tag is still h2, and the rule only changes how it looks.
Next lesson is lists: a rule for li styles every item at once. Later, classes let you pick only some tags of a kind. Class idea: restyle the same page three ways (calm, loud, sporty) without changing the HTML.