Lesson 11: CSS Classes
45 minutes
Overview
Up until this point, the only styling students have been able to do is styling by the element, which means that every element of a particular kind has the same style. This lesson expands on the CSS that students have already learned by introducing classes, which allow web developers to treat groups of elements they want to be styled differently than other elements of the same type. Students first investigate and modify classes on various pages, then create their own classes and use them to better control the appearance of their pages. They then reflect on how they could use this skill to improve their team websites.
Question of the Day: How can we create different styles for the same type of element?
Note: Single elements can also be selected by id, but this type of selection is possible with a class applied only to that single element. Because id selection does not add any extra functionality, it is not taught in this course.
Standards
AP - Algorithms & Programming
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 2-AP-17 - Systematically test and refine programs using a range of test cases.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
Agenda
Objectives
Students will be able to:
- Group elements using classes in order to create more specific styles on their website.
Preparation
- Check the "Teacher's Lounge" forum for verified teachers to find additional strategies or resources shared by fellow teachers
- If you are teaching virtually, consider checking our Virtual Lesson Modifications
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the teachers
- CSS Classes - Slides
- Classes - Resource
Vocabulary
- CSS Class - An identifier that allows multiple elements in an HTML document to be styled in the same way
Teaching Guide
Warm Up (5 minutes)
Discuss: What Styles Do You Want?
Display: Send students to the sample web page in Code Studio or display it on the board.
Prompt: What are two CSS styles on this page that you already know? What is one thing this page does that we haven't learned how to do yet?
Discuss: Have students share their answers to the questions.
Discussion Goal: This discussion serves as a review of the CSS properties students have already learned and prompts them to think about how this page goes beyond that knowledge. Students may not realize it, but this page styles the same types of elements in different ways on different parts of the page. You may want to prompt students to think more deeply about why this is difficult by asking them what the color property of the paragraph element would be in the stylesheet for this page.
Remarks
So far, we've been able to style all of the elements on our page, but there's been a catch. We had to style every element of the same type in the same way. For example, if we wanted one paragraph to have green text, they all had to have green text. If we wanted to have one image float to the right, they all had to float to the right. Today, we're going to learn a way to get around this problem.
Question of the Day: How can we create different styles for the same type of element?
Activity (35 minutes)
Classes
Transition: Send students to Code Studio.
Guide to Programming Levels: Additional guidance for programming levels is provided in the CSD Guide to Programming Levels. This document includes strategies and best-practices for facilitating programming levels with students.
Formative Assessment: Levels 6 & 7 can be used as a formative assessment.
A rubric is provided in level 6, and written feedback can be given to students. Click here to learn more about giving feedback to students.
Level 7 is a free response reflection that can be used as an opportunity to gain insight into how the students completed the assessment level and the choices they made with adding classes and styling them in CSS. In addition, this reflection can be used to identify any misconceptions shared among students that should be cleared up.
Wrap Up (5 minutes)
Journal
Question of the Day: How can we create different styles for the same type of element?
Prompt: Think about your team website. What are two new ideas you have for your site, now that you have classes?
This work is available under a Creative Commons License (CC BY-NC-SA 4.0).
If you are interested in licensing Code.org materials for commercial purposes contact us.
