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