Styling the <p> Element

Styling the <p> Element

The font family is set using the font-family property. A range or fonts should always be included, separated by commas. A generic font family must be included at the end of the list. If a user does not have the initial font family, his or her browser will look for the second font family. If no font family matches are found, the browser will fall back to the generic font family.

Generic Font Families Generic font families are a fallback mechanism to provide some basic font styling if none of the specified font families are available. The five generic font families are serif, sans-serif, cursive, fantasy, and monospace.

The font-size property will be set to 80%, which will make it 80% of the user's default browser style. Using percentages will allow the user to control the overall size of fonts (see Figure 7.3).

Figure 7.3. Screenshot of styled paragraphs.

Ems and Percents In theory, there is no difference between using ems or percents for font sizing. However, Internet Explorer 5 for Windows will misread em measurements below 100% and change the unit from ems to pixels. For example, a value of .8em will be displayed at 8px. To avoid this problem, font-size should be set using percentage units for any value below 100%.

Finally, a line-height of 140% will be included to provide space between each line and make the text more readable. The default line-height for most browsers is 120%. Setting a value of 140% will add 20% additional space between each line. The rule set is shown in Listing 7.4.

Listing 7.4. CSS Code Containing Styles for the <p> Element

p
{
    font-family: arial, helvetica, sans-serif;
    font-size: 80%;
    line-height: 140%;
}