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
- Print a copy of RGB Colors - Activity Guide for every student.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- RGB Colors - Key
For the Students
- RGB Colors - Activity Guide
Vocabulary
- CSS Class - An identifier that allows multiple elements in an HTML document to be styled in the same way
Introduced Code
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?
- Lesson Overview
- Teacher Overview
- Student Overview
- RGB Colors - Activity Guide Key (PDF | DOCX)
- RGB Widget
- Student Overview
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.
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.
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.
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 PickerWhy 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.
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
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.
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, usingfont-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.
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 <h5 class="winter">
. 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, usingfont-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.
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 <h5 class="winter">
. 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 thewinter
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.
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.