Pick some with a class

Classroom resources

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.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can mark an element with class="name" and style it with .name in the CSS.
• I can use one class on several elements.
• I can find a class rule that matches nothing, because of a different name or a dot in the HTML.

Timing

Predict and Run 10 min · Investigate 8 min · Modify 8 min · Mix it up 4 min · Make 10 min

Before class

Read the unit primer "Lists, links and pictures in 5 minutes" first, then do the Make task yourself in the playground (about 5 minutes).

A class is a name you choose and put on elements with class="name". In the CSS a rule starting with a dot, .name { }, styles every element with that class. The dot is only in the CSS. Students already know that p { } styles all paragraphs; the new idea is choosing which ones.

Running the lesson

1. Predict and Run: the usual guess is all four paragraphs, or only the first. In Modify they add the class and watch the colour follow it.
2. Investigate: both bugs are silent. Ask what the browser does with a rule that matches nothing: it ignores it.
3. Modify: mark one more, change the colour in one place, then add a second class. Ask how many rules changed when the colour changed.
4. Mix it up: the missing semicolon and the missing alt are both from earlier lessons.
5. Make: the check ticks when both classes and both rules are there with the names winner and runner. Look at the page for two different colours.

In class

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.

• Which ones change? (predict, 3 min)

  With your partner, point to each paragraph and say whether it turns crimson. Hold up 1, 2, 3 or 4 fingers for the option you chose.

  Take a vote before running. Ask someone who chose all four what the class is for. The idea to land: the class is the mark, the rule picks by the mark.

• Name and swap (end, 4 min)

  Swap pages with a partner. Without running them, read each tag with a class and say which rule it matches.

  Listen for students who match by eye and miss a capital letter. Ask what the browser does when the names differ.

The hard part (on purpose)

Believing the dot belongs in both places. Ask where each of the two names is written, and which one is the CSS.

When students get stuck

Answers to the checks

1. Predict: Which lines of text turn crimson?
   Bring a hat. and Bring water. The rule .note picks every element marked class="note", however many there are, and leaves the other paragraphs alone.
2. The rule that does nothing: Bring a hat should be crimson, but it stays black, and there is no error. Click the line in the CSS that causes it.
   line 2
   Line 2 says .Notice, but the paragraph's class is notice. Class names must match exactly, capitals included. A selector that matches nothing is simply ignored.
3. The dot in the wrong place: Bring a hat should be crimson, but it stays black. The CSS is right. Click the line that causes it.
   line 7
   Line 7 puts the dot in the HTML. The dot is only in the CSS, where it means a class: the tag says class="note" and the rule says .note.
4. Mix it up: The heading stays plain, and a screen reader has nothing to say about the picture. Click the two lines to fix.
   line 3 and 8
   Line 3 needs a ; at its end: without it the browser drops both declarations, and the h2 rule does nothing. Line 8 needs alt, to say what the picture shows.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Mark one more

<style>
  .note {
    color: crimson;
  }
</style>
<h1>Sports day</h1>
<p>Sports day is on Friday.</p>
<p class="note">Bring a hat.</p>
<p class="note">Bring water.</p>
<p class="note">Races start at 9 am.</p>

Modify › Change the colour

<style>
  .note {
    color: navy;
  }
</style>
<h1>Sports day</h1>
<p>Sports day is on Friday.</p>
<p class="note">Bring a hat.</p>
<p class="note">Bring water.</p>
<p class="note">Races start at 9 am.</p>

Modify › A second class

<style>
  .note {
    color: navy;
  }
  .big {
    font-size: 24px;
  }
</style>
<h1>Sports day</h1>
<p class="big">Sports day is on Friday.</p>
<p class="note">Bring a hat.</p>
<p class="note">Bring water.</p>
<p class="note">Races start at 9 am.</p>

Make

<style>
  .winner {
    color: darkgreen;
  }
  .runner {
    color: navy;
  }
</style>
<h1>Race results</h1>
<p class="winner">First place: Owls</p>
<p class="runner">Second place: Hawks</p>
<p class="winner">First place: Eagles</p>
<p class="runner">Second place: Falcons</p>

Stretch and support

Stretch: Give one paragraph a third class, `late`, in a third colour. Then give a list item the class `winner` and see that any tag can have one.

Support: Give students the Modify starter and do the first task together, then change the colour in the rule.

Exit ticket

A rule .sale { color: red; } does nothing. Name two things that could be wrong.

No element has class="sale", or the name is spelt differently in the HTML. Another possibility is class=".sale" with the dot in the HTML.

What each step is for

• Predict: Students expect a rule to follow the tag or to pick one element; a class picks every element marked with it, and no others.
• Run: The class in the HTML and the dot rule in the CSS work as a pair: the HTML marks, the CSS styles what is marked.
• Investigate: The class name in the CSS and in the HTML must match exactly, and the dot belongs only in the CSS.
• Modify: The HTML marks and the CSS styles what is marked: change either side, or add a new pair.
• Mix it up: Reading a rule for a missing semicolon, and a picture for a missing alt, uses the CSS rule and the picture tag together.

Where it leads

Next lesson is a whole newsletter page that uses everything so far. Class idea: ask which parts of a school's real page might share a class.