Color and font

Style text with color and font properties.

Color and font

To give the page personality you use color and font settings. color sets the text color, font-family the typeface, and font-size the text size.

Color values are written in hexadecimal like #2a3d66; three pairs of digits give the red, green, and blue tones. For font family you can list fallbacks separated by commas: Georgia, serif. The browser tries Georgia first and falls back to a serif font if it's missing. For font size, relative units like 2rem respect the user's browser settings.

Style the h1 heading

In this lesson you'll add three declarations to the h1 type selector: color, font-family, and font-size. These make the page's top heading stand out.

Order doesn't matter, but grouping similar declarations is a good habit for readability. Each declaration uses the property: value; form and ends with a semicolon. Indenting with two spaces makes the declarations easy to tell apart from the selector.

Font family fallbacks

When you write font-family: Georgia, serif, the browser first looks for Georgia. If it's not on the user's system, it falls back to another serif font. This keeps the page looking similar on different devices.

Generic family names are: serif (with feet), sans-serif (without feet), monospace (equal width). It's a good habit to always end with a generic family name after a specific font.

Exercise Add the h1 rule

Take the file from the previous lesson (header comment + body rule). Below it, add an h1 type selector rule with these declarations: color: #2a3d66, font-family: Georgia, serif, font-size: 2rem. End each declaration with a semicolon.

Show example solution

/* Personal Site stylesheet */

body {
  margin: 0;
}

h1 {
  color: #2a3d66;
  font-family: Georgia, serif;
  font-size: 2rem;
}

Test yourself

Complete the color of the h1 heading

h1 {
  color: ____;
  font-size: 2rem;
}

Show answer

h1 {
  color: #2a3d66;
  font-size: 2rem;
}

Which CSS property sets the text color?
```
h1 {
  /* ? */
}
```
- text-color
- font-color
- color
- text-style
Show answer

color — Correct. CSS uses the 'color' property for text color.
Match each property to its meaning

color

text color
font-family

typeface family
font-size

text size
h1

top-level heading

Next lesson: Spacing and alignment

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies