Lesson 13: RGB Colors and Classes

Overview

In this lesson, students first learn how to specify custom colors using their RGB (red, green, blue) values. They then apply these colors to a new Four Seasons web page, which uses CSS classes. CSS classes allow web developers to treat groups of elements they want styled differently than other elements of the same type. Using classes, students add more styles to the Four Seasons web page, then use them to style their personal 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.

Agenda

Warm Up (5 minutes)
RGB Colors Matching
Activity (40 minutes)
RGB and Classes
Wrap Up (5 minutes)
Journal: Reflecting on the Practices

View on Code Studio

Objectives

Students will be able to:

Group elements using classes in order to create more specific styles on their website.
Apply the rgb() color function to add custom colors to their website

Preparation

Print a copy of RGB Colors - Activity Guide for every student.

Vocabulary

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

Introduced Code

rgb(red, green, blue)

Support

Lesson Forum

Report a Bug

Teaching Guide

Warm Up (5 minutes)

RGB Colors Matching

Remarks

So far, you've been using color names to choose colors for your web pages. That means that you can only use the colors that someone else has already thought of. Today, you're going to learn how to mix new colors for your pages.

Distribute: Hand out the RGB Colors - Activity Guide.

Transtion: Send students to Code Studio to use the RGB widget at the beginning of this progression to complete the activity guide. You may want to answer one question together, then allow students to work in pairs to complete the first activity.

Remarks

On the computer screen, we mix colors by combining red, green, and blue. In the next few levels, you'll have a chance to use the color mixer to choose your own colors, then put them into a web page.

Activity (40 minutes)

RGB and Classes

Transition: Once students have completed the warm up, allow them to continue working through the remaining levels.

Code Studio levels

View on Code Studio

RGB Colors - Activity Guide (PDF | DOCX)

RGB Widget
Student Overview

View on Code Studio

Student Instructions

How does the code work?

For the code to work, you need to both create a winter class and add elements to the class.

The class is created in the style sheet, with the following code.

.winter {
  color: rgb(195,230,255);
}

This code creates a class called winter and makes everything in the class our winter blue, which has the RGB values of (195,230,255).

The code that adds a h5 element to the winter class is <h5 class="winter">. The class=winter inside the opening tag adds everything inside the tag to the class.

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.

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.

I got different RGB values, but mine are right, too.

Because RGB creates millions of different colors, some are so similar that people have a hard time telling them apart. That means that there are multiple RGB values that are close enough to work for our winter color.

Classes

In this page, the web developer has used classes to give some of the words our winter color.

Look at the HTML code for the winter words. Why is "snowy" the only winter word without the winter color?
Add code to the HTML that will give "snowy" the same winter blue as the other words.
Look inside the style sheet to find the rule that makes all the words in the winter class blue, and check whether your RGB numbers are close to the ones in the style sheet.
Discuss with your partner how the code works.

CSS Classes
Student Overview

View on Code Studio

Student Instructions

How does the code work?

For the code to work, you need to both create a winter class and add elements to the class. The class is created in the style sheet, with the following code.

.winter {
  color: rgb(195,230,255);
}

This code creates a class called `winter` and makes everything in the class our winter blue, which has the RGB values of (195,230,255). The code that adds a `h5` element to the winter class is `

`. The `class=winter` inside the opening tag adds everything inside the tag to the class.

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.

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.

Why would a web developer use classes?

I got different RGB values, but mine are right, too.

Adding Rules

Your winter words should all have the same color and font.

Find the CSS rule-set in the style sheet that gives the winter words their style.
Add a rule that changes the font of the winter words. It can be any font, but it will need to be different from that of the other three seasons.
Add any other rules you'd like for your winter words.

Wrap Up (5 minutes)

Journal: Reflecting on the Practices

Journal: Have students update their "CSS Properties" page in their journal with the new information they've learned about classes.

Journal: Have students reflect on their development of the five practices of CS Discoveries (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one practice you thought was especially important for the activity we completed today. What made it so important?

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.

Lesson 13: RGB Colors and Classes

Overview

Purpose

Agenda

View on Code Studio

Objectives

Students will be able to:

Preparation

Links

For the Teachers

For the Students

Vocabulary

Introduced Code

Support

Lesson Forum

Report a Bug

Teaching Guide

Warm Up (5 minutes)

RGB Colors Matching

Activity (40 minutes)

RGB and Classes

Code Studio levels

Wrap Up (5 minutes)

Journal: Reflecting on the Practices

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)