Color and background
Add color and background properties.
Text color: color
The color property sets the text color. HEX codes (like #2b2b2b) are a common, precise way to specify colors; each pair of digits gives the red, green, and blue amount. Light text on a dark background (or the opposite) stays readable.
For Travel Diary, let's use a dark gray for the body text:
body {
color: #2b2b2b;
}Background color: background-color
The background-color property sets the color behind an element. We give the page background to the body selector and the card background to the .post selector.
For Travel Diary, a light cream page background with white cards gives good contrast:
body { background-color: #f4f1ea; }
.post { background-color: #ffffff; }Don't forget contrast
When picking colors, don't overlook contrast. Light text on a light background or dark text on a dark background is unreadable. The general rule: keep a clear tonal difference between text and background.
Dark gray text (#2b2b2b) on white cards, with white cards (#ffffff) on a cream page, is a solid starting point.
Exercise Add the colors
Add colors to the existing file. In the body rule, add color: #2b2b2b and background-color: #f4f1ea. In the .post rule, add background-color: #ffffff. Don't remove existing declarations; only add new ones.
Show example solution
/* Travel Diary stylesheet */
body {
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: #2b2b2b;
background-color: #f4f1ea;
}
.post {
width: 640px;
padding: 24px;
margin: 16px auto;
box-sizing: border-box;
background-color: #ffffff;
}Test yourself
-
Which is a valid color value?
- 18px
- #2b2b2b
- Georgia, serif
- bold
Show answer
#2b2b2b — Correct. #2b2b2b is a valid HEX color code.
-
Complete the background-color value
background-color: ____;Show answer
background-color: #ffffff; -
Match each property to its sample value
- color
- #2b2b2b
- background-color
- #f4f1ea
- font-size
- 18px
- width
- 640px