Lesson 10: 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 great 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 for the sake of simplicity.

Agenda

Warm Up (5 minutes)

Activity (40 minutes)

Wrap Up (5 minutes)

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

For the Teacher

For the Students

Vocabulary

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

Introduced Code

Support

Report a Bug

Teaching Guide

Warm Up (5 minutes)

Web Lab: 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: Have students head to Code Studio and demonstrate how it works. It is a widget that students will play with to investigate RGB colors. 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)

Web Lab: RGB and Classes

Transition: Have students go to Code Studio.

Wrap Up (5 minutes)

Update HTML & CSS Elements List

Set Up: Have students take out their Web Development Practices - Project Guide.

Have students update their HTML Elements and CSS Properties tables of their Web Development Practices - Project Guide packet.

View on Code Studio

The Internet - Web Development: Lesson 10 - RGB Colors and Classes

Background

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

Vocabulary

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

New Blocks

Resources

  • Levels
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

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: 255, green: 140, blue: 105 - rgb(255,140,105)

D) red: 123, green: 104, blue: 238 - rgb(123,104,238)

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 make over sixteen million different colors with RGB color mixing.

View on Code Studio

Stop: Check Answers

Discuss: Review the answers from the level students just completed. Students will get to continue to play with RGB values so don't worry too much about them fully understanding RGB yet.

View on Code Studio

Stop

Stop and wait for instructions from your teacher before moving on.

View on Code Studio

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

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

Stop: Discuss Classes

Discuss: Have students share what they noticed about the last level they were looking at.

View on Code Studio

Classes

Sometimes you only want to style some specific elements of a type instead of all elements of one type. Classes allow for a group of elements to have their own unique style. This applies to elements on the same page or on separate pages, as long as all the pages link to the same style sheet.

To style using classes:

  1. First, you need to mark the elements in HTML that will be in that class.
  2. Second, you need to write a style rule-set for that class. To write a rule for a class of elements, the selector for the rule-set has a . before the class name.

For example, the code below would style the fancy class which has been set up for a paragraph element:

HTML file CSS File Result
 <p class="fancy">Good Day</p> 
<p>Bad Day</p>
.fancy 
result image
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

Stop: Review Classes

Matching

Group: Partner students up.

Display: At the front of the room display Matching Review - Slides for everyone to see.

Distribute: Give each student a copy of Matching Review - Activity Guide.

On the activity guide there is the starter code for a web page as well as code for styling a class called "myClass". As a class you are going to look at a bunch of different web pages where the myClass styling has been applied to one more element in the original code. The web pages can be found on individual slides in Matching Review - Slides.

Show each slide one by one and for each web page have students work with their partner determine elements were put in the "myClass" class. Each student should write down the element type and the line number of the opening tag for each element.

Once students have looked at all the web page results and written down their answers, they can test out their guesses using the next level on Code Studio!

Transition: Have students return to Code Studio.

View on Code Studio

Stop

Wait for instructions from your teacher before moving on.

In the meantime, you can go back to the seasons page and use more styles to make the page more interesting.

Challenges:

  • Make the pictures float to the left of the text.
  • Give the pictures rounded corners.
  • Make the season-themed words closer together on the page.
  • Levels
  • 13
  • 14
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Check your matching answers

Test out your guesses from the matching activity by applying the class styling to the elements and see if it produces the same result. The results from the slide show are shown below.

Question 1 Question 2 Question 3 Question 4 Question 5
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 (Need help with how to screenshot? Check out this website .)

Checklist

  • On your hobby page, give each hobby its own text color using RGB values.
  • On your recipe page, give all the parts of the ingredients list the same background color, including the title.
  • Use classes to style at least 2 other elements of your personal website

Standards Alignment

View full course alignment