HTML and CSS Reference
In-Depth Information
◗
3.
Save your changes to the style sheet and then reload the
home.htm
file in your
Web browser. Verify that the text of the last paragraph appears in green and is
right-aligned on the page (see Figure 3-25).
Figure 3-25
Closing paragraph of the home page
Styling Web Page Text
The
text-align
property you used in your style rule to right-align the contents of the
closing paragraph is an example of a text style. In this section, you'll explore other CSS
styles used to format the appearance of Web page text.
Choosing the Text Font
Tammy has noticed that all of the text in her sample pages is displayed in the same type-
face, or
font
. She'd like to see more variety in how the Web page text is rendered. The
default font used by most browsers is Times New Roman, but you can specify a different
font for any page element using the property
font-family:
fonts
;
where
fonts
is a comma-separated list of specifi c or generic font names. A specifi c
font is a font that is identifi ed by name, such as Times New Roman or Helvetica. When
referenced by the
font-family
property, a specifi c font refers to a font defi nition that is
stored on a user's computer. A generic font describes the general appearance of a type-
face, but does not rely on a specifi c font defi nition. CSS supports the following generic
font groups:
•
serif
—a typeface in which a small ornamentation appears at the tail end of each
character
•
sans-serif
—a non-serif font without any ornamentation
•
monospace
—a typeface in which each character has the same width; often used to
display programming code
•
cursive
—a typeface that mimics handwriting with highly stylized elements and fl our-
ishes; best used in small doses for decorative page elements
•
fantasy
—a highly ornamental typeface used for page decoration; should never be used
with body text
When you use generic fonts, you have no control over which font a user's browser
will choose for your Web page. Therefore, the common practice is to list specifi c fonts
fi rst, in order of preference, and end the list with a generic font. If a user's browser can-
not fi nd any of the specifi c fonts listed, it uses a generic font of its own choosing. For
example, the style
font-family: 'Arial Black', Gadget, sans-serif;
tells a browser to use the Arial Black font if available; if not, to look for the Gadget font;
and if neither are available, to use a generic sans-serif font of its own selection. Note that
font names containing one or more blank spaces (such as Arial Black) must be enclosed
within single or double quotes.
