Background color
Learn the background-color property.
The background-color property
background-color paints an element's surface. You set the text color with color, and the surface color with background-color.
Any color format works as the value: #1a1a2e, rgb(230, 57, 70), hsl(355, 78%, 56%) or transparent. It is the shortest way to color a badge, a button or a section's surface in one line.
color vs background-color
Two properties are easy to confuse: color is the text color, background-color is the surface behind it. To make a paragraph's text navy, you write color: navy; to paint its surface, background-color: #f5f5f5.
Keep enough contrast between the two so the text stays readable. Dark text on a dark surface is unreadable. A practical pair: cream surface #fdf6e3 with dark navy text #1a1a2e.
Exercise Style the .badge
Add a .badge class selector. Set its background-color property to #ff5733 and its color property to #fff.
Show example solution
/* style the .badge */
.badge {
background-color: #ff5733;
color: #fff;
}Test yourself
-
Which value is NOT valid for background-color?
.badge { background-color: /* ? */; }- transparent
- rgb(230, 57, 70)
- hsl(355, 78%, 56%)
- 1px solid #333
Show answer
1px solid #333 — Correct. 1px solid #333 is a border value; background-color wants a color.
-
Write a valid hex value for the badge surface
.badge { background-color: ____; color: #fff; }Show answer
.badge { background-color: #ff5733; color: #fff; } -
Match each property to its effect
- color
- Sets the text color
- background-color
- Sets the surface color
- opacity
- Fades the whole element
- rgba()
- Fades only the color