Chapter 11: CSS Colors in RGB and HSL

A Complete Frontend Developer Textbook for Beginners (2023 Edition)

This is the textbook version of Lesson 11 of 100 from the Udemy video course: A Complete Frontend Developer Course for Beginners

← Chapter 10: Positioning Elements

← Table of Contents

Overview

This lesson covers the following HTML tags, CSS topics, and JavaScript commands for the first time:

HTML

None.

CSS

1. background-color
2. rgb()
3. hsl()

JS

None.

This lesson begins with this Codepen. Code along with me to increase retention!

Lecture

In previous lessons, we have been using the background property to set the color.

body {
 width: 75vw;
 height: 75vh;
 border: solid red;
 background: lightgreen;
}

To be more precise, the background property is actually a shorthand that combines many related properties together (which we will cover in depth in the next lesson).