Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 89

Set Default Font Properties for the Page
As you have already seen, CSS rules applied to the body selector apply to the entire page.
Modify the CSS for the body selector to display most text using a sans-serif font. The new
font typeface style rule will apply to the entire Web page unless more specific styles rules
are applied to a selector (such as h1 or p ), a class, or an id (more on classes and ids later).
body { background-color: #E6E6FA;
color: #191970;
font-family: Arial, Verdana, sans-serif;
}
Save your page as embedded1.html and test it in a browser. Your page should look sim-
ilar to the one shown in Figure 3.10. Notice that just a single line of CSS changed the
font typeface of all the text on the page!
Figure 3.10
Text is displayed
using a sans-serif
font
Configure the h1 Selector
You will configure the line-height and font-family CSS properties. Set the line-
height property to 200%—this will add a bit of empty space above and below the
heading text. (In Chapter 6 you'll explore other CSS properties, such as the margin,
border, and padding that are more commonly used to configure space surrounding an
element.) Next, modify the h1 selector to use a serif font. When a font name contains
spaces, type quotes as indicated in the code below. While it is generally recognized that
blocks of text using sans-serif fonts are easier to read, it is common to use a serif font
to configure page or section headings.
h1 { background-color: #191970;
color: #E6E6FA;
line-height: 200%;
font-family: Georgia, "Times New Roman", serif;
}