Working with Colors

Learn how to add and manipulate colors in CSS!

Learning Objectives

Understand different ways to specify colors
Master text and background colors
Learn about color transparency

Explanation

Colors bring life to web pages, and CSS gives you many ways to specify them: 1. Color Names: CSS has 140+ named colors like "red", "blue", "gold", etc. 2. RGB Values: Colors can be defined using Red, Green, and Blue values from 0-255: rgb(255, 0, 0) is bright red. 3. HEX Codes: These are 6-digit codes preceded by a # symbol, like #FF0000 for red. 4. HSL: This stands for Hue, Saturation, and Lightness: hsl(0, 100%, 50%) is red. You can also add transparency to colors using rgba() or hsla(), where the 'a' stands for 'alpha' (transparency). The most common color properties are: - color: Sets the text color - background-color: Sets the background color - border-color: Sets the color of borders

Code Example

/* Different ways to specify the color red */
.color-name {
  color: red;
}
.rgb-value {
  color: rgb(255, 0, 0);
}
.hex-code {
  color: #FF0000;
}
.hsl-value {
  color: hsl(0, 100%, 50%);
}
/* Transparent red */
.transparent-red {
  color: rgba(255, 0, 0, 0.5);
}

Try It Yourself!

Try changing the background color of a div element to your favorite color!

CSS Editor

Mini Quiz

Test your knowledge with these quick questions!

1. Which property is used to change the text color in CSS?

text-color

font-color

color

text-style

2. In RGB, what does rgb(0, 0, 255) represent?

Red

Green

Blue

Yellow

Your Progress

Lesson ProgressIn Progress

Est. time: 15-20 min

75 points

Module Progress

Basic Styling2/10 completed

Complete all lessons to earn the Style Wizard badge!

Rewards

Complete this lesson

Earn 75 points

Complete this module

Earn the Style Wizard badge