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

Next lesson: Project final - Blog page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies