Designing a Web Page with CSS - HTML, CSS, and Dynamic HTML - page 181

distinguish between nine different font weights. For practical purposes, you can assume
that 400 represents normal (not bold) text, 700 is bold text, and 900 represents heavy
bold text. You also can use the keywords normal or bold in place of a weight value, or
you can express the font weight relative to the text of the containing element, using the
keywords bolder or lighter .
Another style you can use to change the appearance of your text is

To prevent your browser
from displaying page
headings in bold, you
can set the font-weight
property to normal.

text-decoration: type ;
where the type values include none (for no decoration), underline , overline , and
line-through . You can apply several decorative features to the same element by listing
them as part of the text-decoration style. For example, the style

text-decoration: underline overline;
places a line under and over the text in the element. Note that the text-decoration style
has no effect on nontextual elements, such as inline images.
To control the case of the text within an element, use the style

To prevent your
browser from underlin-
ing hypertext links, set
the text-decoration
property of the hypertext
element to none.

text-transform: type ;
where type is capitalize , uppercase , lowercase , or none (to make no changes to
the text case). For example, if you want to capitalize the if rst letter of each word in an
element, you could use the following style:

text-transform: capitalize;
Finally, you can display text in uppercase letters and a small font using the style

font-variant: type ;
where type is normal (the default) or small-caps (small capital letters). Small caps are
often used in legal documents, such as software agreements, in which the capital let-
ters indicate the importance of a phrase or point, but the text is made small so as to not
detract from other elements in the document.

Setting Font and Text Appearance
• To specify the font style, use

font-style: type ;
where type is normal , italic , or oblique .
• To specify the font weight, use

font-weight: type ;
where type is normal , bold , bolder , light , lighter , or a font weight value.
• To specify a text decoration, use

text-decoration: type ;
where type is none , underline , overline , or line-through .
• To transform text, use

text-transform: type ;
where type is capitalize , uppercase , lowercase , or none .
• To display a font variant of text, use

font-variant: type ;
where type is normal or small-caps .