Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
Ch. 2
10
11
12
13
14

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)

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.
  • Apply the rgb() color function to add custom colors to their website

Preparation

Links

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

For the Teachers

For the Students

Vocabulary

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

Introduced Code

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.

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?

View on Code Studio

Overview

This lesson covers CSS classes and custom colors. The students first learn how to specify custom colors using RGB (red, green, blue) values, then apply these colors to a new Four Seasons web page, which uses CSS classes. Using classes, students add more styles to the Four Seasons web page, then uses them to style their personal websites.

Vocabulary

  • HTML Class - Makes it possible to define equal styles for elements by giving them all the same class name.

Introduced Code

Resources

View on Code Studio

RGB Colors

All colors, whether they have names or not, can be described by the level of red, green, and blue light it takes to make them. This is called an RGB value (short for Red-Green-Blue). You can use the widget on your left to try out different RGB values and see what colors they make.

  • Click "Run" to start the widget on the left, and use the sliders to adjust the levels of red, green, and blue light.
  • For each of the colors below, match it to its RGB value.

A) red: 216, green: 191, blue: 216 - rgb(216,191,216)

B) red: 255, green: 239, blue: 213 - rgb(255,239,213)

C) red: 250, green: 128, blue: 114 - rgb(250,128,114)

D) red: 70, green: 130, blue: 180 - rgb(70, 130, 180)

E) red: 107, green: 142, blue: 35 - rgb(107,142,35)


Why do red and green make yellow? When you mix paint, red and green make brown, but RGB color mixing uses light instead of paint, so the colors mix differently. RGB uses _additive color mixing_. In additive color mixing, red and green make yellow, red and blue make magenta, and blue and green make cyan. When you mix the three primary colors together (red, green, and blue), they make white. You can read more at Wikipedia - Additive Color
How many colors can I make with RGB color mixing?

You can make over sixteen million different colors with RGB color mixing.

View on Code Studio

Teaching Tip

Color solution for Winter Blue: (red, green, blue) = (195, 230, 255)

Student Instructions

Winter Color

In the next few levels, you'll be finding seasonal colors for a website. Here, you'll need to find the RGB values for a wintery blue color.

  • Click "Run" to start the widget.
  • Adjust the levels until you match the wintery blue color at the bottom of the widget.
  • Write the RGB values on your activity guide. You will need them in the next activity.

How do I make a color lighter?

To make a color lighter, you need to add more light (increase the level of the slider). If you have already added the maximum amount of blue light, you will need to add more red and green light to make your blue lighter.

Why do red and green make yellow? When you mix paint, red and green make brown, but RGB color mixing uses light instead of paint, so the colors mix differently. RGB uses _additive color mixing_. In additive color mixing, red and green make yellow, red and blue make magenta, and blue and green make cyan. When you mix the three primary colors together (red, green, and blue), they make white. You can read more at Wikipedia - Additive Color
How many colors can I make with RGB color mixing?

You can make make over sixteen million different colors with RGB color mixing.

View on Code Studio

Teaching Tip

Color solution for Summer Yellow: (red, green, blue) = (255, 230, 100)

Student Instructions

Summer Color

Find the RGB values for a summery yellow color.

  • Click "Run" to start the widget.
  • Adjust the levels until you match the summery yellow at the bottom of the widget.
  • Write the RGB values on your activity guide. You will need them in the next activity.

Why do red and green make yellow? When you mix paint, red and green make brown, but RGB color mixing uses light instead of paint, so the colors mix differently. RGB uses _additive color mixing_. In additive color mixing, red and green make yellow, red and blue make magenta, and blue and green make cyan. When you mix the three primary colors together (red, green, and blue), they make white. You can read more at Wikipedia - Additive Color
How many colors can I make with RGB color mixing?

You can make make over sixteen million different colors with RGB color mixing.

View on Code Studio

Student Instructions

Spring and Autumn Colors

Choose RGB values for spring and autumn colors.

  • Click "Run" to start the widget.
  • Adjust the levels until you find a spring color you like, then write down the values on your activity guide.
  • Do the same for an autumn color. You will need the RGB values for the next activity.

Where can I see the whole range of color types? You can find many options for colors at W3Schools - HTML Color Picker
Why do red and green make yellow? When you mix paint, red and green make brown, but RGB color mixing uses light instead of paint, so the colors mix differently. RGB uses _additive color mixing_. In additive color mixing, red and green make yellow, red and blue make magenta, and blue and green make cyan. When you mix the three primary colors together (red, green, and blue), they make white. You can read more at Wikipedia - Additive Color
How many colors can I make with RGB color mixing?

You can make make over sixteen million different colors with RGB color mixing.

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

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.
View on Code Studio

Student Instructions

How does the code work?

 For the code to work, you need to both create a spring class and add elements to the class. The spring class is already created in the style sheet, but it doesn't have any rules. 
.spring {
  color: rgb(195,230,255);
}
Look at the rules in the `winter` class for clues to how to make rules for the summer class. You will also need to add some elements to the spring class inside your HTML file. The code in the HTML file that adds a `h5` element to the winter class is `
`. Use this pattern to add elements to the spring class, too.
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? 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.

Spring Class

Now that your winter class is ready, you can start on the other seasons.

  • Find the empty CSS rule-set in the style sheet that gives the spring words their style.
  • Add two rules, one to give the text your spring color for earlier in the lesson, and another to give the text a different font, font size, or decoration.
  • Add the spring class to the spring elements in the HTML page.
View on Code Studio

Student Instructions

How does the code work?

 For the code for the winter class to work, it needs 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.
How do I create a new rule-set? You can create a new rule-set by following the pattern that the `winter` and `spring` classes used in the style sheet. 
.winter {
  color: rgb(195,230,255);
}
The selector name and the color values will be different, but the following pattern is always the same. 
.classname {
  property1: value1;
  property2: value2;
}
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.

Summer and Autumn Classes

  • Inside the style sheet, create a new rule-set for a "summer" class.
  • Add a rule to set the text in the summer class to your summer RGB color.
  • Add the summer class to the summer elements in the HTML page.
  • Do the same for the autumn class.
View on Code Studio

Student Instructions

Free Play Styling

Your turn to decide what you want to style! Play with the classes styling and RGB colors to improve your personal website.

  • Make sure you have completed the checklist below.
  • Take a screenshot of your home page and save it somewhere on your computer so you can find it later.

Checklist

  • Somewhere on your site, give text a particular color using RGB values.
  • On your lists page, give all the list items the same background color.
  • Use classes to style at least two other elements of your personal website

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.