Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
10
11
12
13
Ch. 2
14
15
16
17
18
19
20
21

Lesson 17: CSS Classes

Overview

Question of the Day: How can we create different styles for the same type of element?

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 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.

Purpose

Up until this point, the only styling students have been able to do is styling by element, which means that every element of a particular kind has the same style. Classes allow for web developers to group together a set of elements they want to style. This means students can single out a certain element they want to style or group together elements from one or more types of elements. Once elements are in a class, the class can be used as a selector in a style rule.

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.

Assessment Opportunities

  1. Group elements using classes in order to create more specific styles on their website.

    See Level 5 on Code Studio.

Agenda

Lesson Modifications

Warm Up (5 minutes)

Activity (40 minutes)

Wrap Up (5 minutes)

View on Code Studio

Objectives

Students will be able to:

  • Group elements using classes in order to create more specific styles on their website.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Vocabulary

  • CSS Class - An identifier that allows multiple elements in an HTML document to be styled in the same way

Support

Report a Bug

Forum

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 2.

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?

Discussion Goal

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.

Discuss: Have students share their answers to the questions.

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 (40 minutes)

Classes

Transition: Send students to Code Studio.

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?

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

  • Sample Web Page
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Sample Website

Click the website below to discover some new ways to style elements.

  • Exploration
  • 3
  • (click tabs to see student view)
View on Code Studio

Student Instructions

::: details [How does the code work?] For the code to work, you need a class, a rule-set, and elements added to the class.

The img-top class is created in the style sheet, and it includes three class rules in its rule-set.

.top-img {
  height: 50px;
  border-radius: 5px;
  margin: 10px;
}

Code in the HTML file adds elements to the classes using attributes inside the tags. For example, the code to add an image to the img-top class is <img class="top-img" src="angelfalls.jpeg" alt="Parakupá Vená / Angel Falls"> . This pattern can be used in most tags. :::

::: details [What rules can be added to a class rule-set?]

A class rule-set can have the same rules as any other type of selector. If a rule does not apply to the content of the class (for example, using font-size on an element with no text), then the computer will ignore that rule, but still use the rules that work. :::

::: details [Why does the selector have a period in front of it?] In CSS, a period in front of a selector means that the selector is the name of a class. If there is no period, it means that the selector is the name of an HTML tag. :::

::: details [Why would a web developer use classes?]

A web developer uses classes when some elements should be styled differently than others, even if they are the same tag. Classes can also be used to give elements that have different tags the same style.

:::

Using Classes

This waterfall page uses classes to make the images at the top of the page a different style from the images in the main part of the page.

Do This

  • Find the CSS rule set in the style.css file that makes the images at the top smaller than the ones on the main part of the page.
  • Add a new rule to one of the classes, and check to see that it only affects the images in that class.
  • Skill Building
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

::: details [How does the code work?] For the code to work, you need a class, a rule-set, and elements added to the class.

The img-top class is created in the style sheet, and it includes three class rules in its rule-set.

.top-img {
  height: 50px;
  border-radius: 5px;
  margin: 10px;
}

Code in the HTML file adds elements to the classes using attributes inside the tags. For example, the code to add an image to the img-top class is <img class="top-img" src="angelfalls.jpeg" alt="Parakupá Vená / Angel Falls"> . This pattern can be used in most tags. :::

::: details [What rules can be added to a class rule-set?]

A class rule-set can have the same rules as any other type of selector. If a rule does not apply to the content of the class (for example, using font-size on an element with no text), then the computer will ignore that rule, but still use the rules that work. :::

::: details [Why does the selector have a period in front of it?] In CSS, a period in front of a selector means that the selector is the name of a class. If there is no period, it means that the selector is the name of an HTML tag. :::

::: details [Why would a web developer use classes?]

A web developer uses classes when some elements should be styled differently than others, even if they are the same tag. Classes can also be used to give elements that have different tags the same style.

:::

The Four Humors

This page describes the four humors, but only one of them is styled with a special class.

Do This

  • Look through the code to see how the "sanguine" class works.
  • Add a new class for one of the other humors.
  • Add the class and rule-set in the style.css file.
  • Add elements to the class in the index.html file.
View on Code Studio

Student Instructions

Practice your new skills here.


Choose from the following activities:
a
Using Classes: Your Favorite Month

Choose a month and add in a class to make it stand out on this web page.

b
Debug: Classes

Use your debugging skills to figure out why the Autumn class isn't working on this web page.

View on Code Studio

Student Instructions

::: details [How does the code work?] For the code to work, you need a class, a rule-set, and elements added to the class.

The img-top class is created in the style sheet, and it includes three class rules in its rule-set.

.top-img {
  height: 50px;
  border-radius: 5px;
  margin: 10px;
}

Code in the HTML file adds elements to the classes using attributes inside the tags. For example, the code to add an image to the img-top class is <img class="top-img" src="angelfalls.jpeg" alt="Parakupá Vená / Angel Falls"> . This pattern can be used in most tags. :::

::: details [What rules can be added to a class rule-set?]

A class rule-set can have the same rules as any other type of selector. If a rule does not apply to the content of the class (for example, using font-size on an element with no text), then the computer will ignore that rule, but still use the rules that work. :::

::: details [Why does the selector have a period in front of it?] In CSS, a period in front of a selector means that the selector is the name of a class. If there is no period, it means that the selector is the name of an HTML tag. :::

::: details [Why would a web developer use classes?]

A web developer uses classes when some elements should be styled differently than others, even if they are the same tag. Classes can also be used to give elements that have different tags the same style.

:::

Your Favorite Month

This page lists information on the different months of the year.

Do This

  • Create a class for your favorite month so that it looks different from the others. Use at least three properties in the CSS rule-set.
View on Code Studio

Student Instructions

::: details [How does the code work?] For the code to work, you need a class, a rule-set, and elements added to the class.

The img-top class is created in the style sheet, and it includes three class rules in its rule-set.

.top-img {
  height: 50px;
  border-radius: 5px;
  margin: 10px;
}

Code in the HTML file adds elements to the classes using attributes inside the tags. For example, the code to add an image to the img-top class is <img class="top-img" src="angelfalls.jpeg" alt="Parakupá Vená / Angel Falls"> . This pattern can be used in most tags. :::

::: details [What rules can be added to a class rule-set?]

A class rule-set can have the same rules as any other type of selector. If a rule does not apply to the content of the class (for example, using font-size on an element with no text), then the computer will ignore that rule, but still use the rules that work. :::

::: details [Why does the selector have a period in front of it?] In CSS, a period in front of a selector means that the selector is the name of a class. If there is no period, it means that the selector is the name of an HTML tag. :::

::: details [Why would a web developer use classes?]

A web developer uses classes when some elements should be styled differently than others, even if they are the same tag. Classes can also be used to give elements that have different tags the same style.

:::

Debug: The Four Seasons

This page has a separate class for each of the four seasons, but the autumn class isn't working.

Do this

  • Find the bug in the autumn class and fix the code so that the class makes the text a dark red.
  • Assessment
  • 6
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Create classes that can be referenced and affected as a group.

Assessment Criteria:
Extensive Evidence

The class and rule-set are created correctly, all elements of the of the chosen haiku are included, and there are at least three rules in the rule-set.

Convincing Evidence

A class and rule-set are created and most elements in the chosen haiku section of the website is affected by this class, but there may be a few minor errors for some parts of text, or there may be fewer than three rules in the rule-set.

Limited Evidence

And class and rule-set are created, and at least some elements in the website are in that class, but there may be major errors that prevent the text from being styled.

No Evidence

No class or rule sets are created, or no website elements are put in the class.

Student Instructions

::: details [How does the code work?] For the code to work, you need a class, a rule-set, and elements added to the class.

The img-top class is created in the style sheet, and it includes three class rules in its rule-set.

.top-img {
  height: 50px;
  border-radius: 5px;
  margin: 10px;
}

Code in the HTML file adds elements to the classes using attributes inside the tags. For example, the code to add an image to the img-top class is <img class="top-img" src="angelfalls.jpeg" alt="Parakupá Vená / Angel Falls"> . This pattern can be used in most tags. :::

::: details [What rules can be added to a class rule-set?]

A class rule-set can have the same rules as any other type of selector. If a rule does not apply to the content of the class (for example, using font-size on an element with no text), then the computer will ignore that rule, but still use the rules that work. :::

::: details [Why does the selector have a period in front of it?] In CSS, a period in front of a selector means that the selector is the name of a class. If there is no period, it means that the selector is the name of an HTML tag. :::

::: details [Why would a web developer use classes?]

A web developer uses classes when some elements should be styled differently than others, even if they are the same tag. Classes can also be used to give elements that have different tags the same style.

:::

Haikus!

This page has several diffent haikus.

Do This

  • Choose one haiku and give it a special look by creating a class for its paragraph and heading tags. Use at least three CSS properties.

What does the <br> tag do?

The <br> tag is used here to start a new line inside the same paragraph. In the code below, each poem is still treated like one big paragraph. However, the <br> tag puts each line of the haiku is on its own line. You do not need to add any CSS or classes to the <br> tags.

View on Code Studio

Student Instructions

Try extra challenges or learn some new code.


Choose from the following activities:
a
Individual Ids

Learn how to use the id attribute to give a style to a single element.

b
Free Play

Make a web page using the new code.

View on Code Studio

Student Instructions

::: details [How does the code work?] For the code to work, you need a class, a rule-set, and elements added to the class.

The img-top class is created in the style sheet, and it includes three class rules in its rule-set.

.top-img {
  height: 50px;
  border-radius: 5px;
  margin: 10px;
}

Code in the HTML file adds elements to the classes using attributes inside the tags. For example, the code to add an image to the img-top class is <img class="top-img" src="angelfalls.jpeg" alt="Parakupá Vená / Angel Falls"> . This pattern can be used in most tags. :::

::: details [What rules can be added to a class rule-set?]

A class rule-set can have the same rules as any other type of selector. If a rule does not apply to the content of the class (for example, using font-size on an element with no text), then the computer will ignore that rule, but still use the rules that work. :::

::: details [Why does the selector have a period in front of it?] In CSS, a period in front of a selector means that the selector is the name of a class. If there is no period, it means that the selector is the name of an HTML tag. :::

::: details [Why would a web developer use classes?]

A web developer uses classes when some elements should be styled differently than others, even if they are the same tag. Classes can also be used to give elements that have different tags the same style.

:::

Individual Ids

You can also use the id attribute to single out just one element for a rule-set.

Do This

  • Look at the image element with the <img id="notes" src="Raseone-Music.png" alt="music notes"> tag, and notice the id attribute.
  • In style.css, look at the rule-set with the #notes selector. Notice how it uses a # instead of a period.
  • Add a new image into the page from the available files, and give it its own style.
View on Code Studio

Student Instructions

Free Play

Use your new knowledge to create a new page styled with classes.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

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.