Module 5: The Role of ID and Class in CSS

Overview

In this module, students will learn to stylize a group of elements using class and individual elements using id. By now, it is likely that some students have already discovered the need for these techniques. If that's the case, this module provides an opportunity to refer back to those scenarios so students can directly apply the content from these lessons to the needs they've already identified and expressed.

Lesson 1: Understanding ID and Class in CSS

• Estimated time required: 60 - 90 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• One of the activities in this lesson asks students to review the various <div> elements they have on their home page. This activity is a good opportunity to stop, wait and ensure that all students have the correct number and order of <div> elements.
• After students add id and class attributes to select elements on their home page, the activities include a reminder that students need to do this on their other pages too. This warrants an additional verbal prompt. If students miss this step now they will waste time later having to go back and do it.

Example Output

When this lesson is complete, students will have added id and class attributes to their index.html file.

Lesson 2: Applying ID and Class in CSS

• Estimated time required: 90+ minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• There are many opportunities for things to go wrong in this and the previous lesson. We strongly suggest that you use the example pages to show students an example of how the new styles change the appearance of the various div elements.

Example Output

When this lesson is complete, students will have modified their external CSS file using id and class selectors. The results should be visible throughout their portfolio site, including their index.html file.

Lesson 3: Pseudo-class Selectors in CSS

• Estimated time required: 60 - 90 minutes
• Link to student Lesson 3 page

Tips for Delivering This Lesson

• The coding and terminology used in this lesson is a bit abstract for many students. However, it's really very simple to implement and results in web pages that come to life as users interact with them. Try to help students see beyond the abstract coding and terminology and recognize the simplicity.
• To help students appreciate how pseudo-classes are used, it can be helpful to review a few real-world websites. Ask students to go to a few websites (either sites you assign or sites they choose) and hover over links with a mouse. Most sites these days use the :hover pseudo-class to create subtle style changes on mouseover. Encourage students to check links within the main body of the web page, rather than navigation menus, as the latter often include other effects (such as dropdown menus) that are triggered with advanced techniques using JavaScript.
• Unfortunately the :focus psuedo-class is less common on real-world web pages. This is arguably even more important than :hover because it helps non-mousers to tell where they are as they're navigating through a web page using the tab key. Students should be encouraged to use both :hover and :focus when creating websites as doing so will help to make the Web more accessible to all users, including those who aren't using mice.

Example Output

When this lesson is complete, students will have added pseudo-class selectors to their external CSS file (:hover, :focus, and :first-letter). The results should be visible in their index.html file.