HTML and CSS Reference
In-Depth Information
Adding Interest and Focus with Styles
In Chapter 2, you learned how to vary the size of headings with the <h1> through
<h6> tags. Any text on a Web page, including headings, can be formatted with a different
color or style to make it stand out by using style properties. Table 3-5 lists some properties
that can be used to enhance standard text on a Web page using styles. Remember that CSS
and inline styles are the preferred technique to alter the style of the content on a Web page.
Font Properties
Refer to Appendix D for
a more complete list of
CSS font properties and
values. You can also set
font characteristics with
the HTML <font> tag (see
Appendix A), but this tag
has been removed from
the HTML5 specification.
Table 3-5 Font Properties and Values
Property
Function
color
• Changes the font color
• Values include six-digit (hexadecimal) color codes, color names, or RGB values
font-family
• Changes the font face or type
• Values include fonts, such as Verdana or Arial; text appears using the default font if the
font face is not specified
font-size
• Changes the font size
• Value can be an actual numeric size, a percentage, or values such as large, medium,
small, etc.
font-style
• Changes the style of a font
• Values include normal, italic, and oblique
font-weight
• Changes the weight of a font
• Values include normal, bold, bolder, and lighter
Figure 3-18 shows how several of these attributes affect the appearance of text.
normal
text
normal text that
is colored red
text in font-family
Copperplate
Gothic Bold
text in Calisto
MT font-family
text with
font-size
xx-large
text in font-
size small
Figure 3-18 Examples of various fonts.
Adding Interest and Focus with HTML Tags
There is another way to format text in addition to the inline styles used in
Chapter 2. Web pages that use the HTML5 DOCTYPE statement allow the use of dep-
recated tags, as explained in Chapter 2. These Web pages validate the HTML elements
and attributes, including deprecated elements, successfully. Text can also be formatted
using the formatting tags in HTML. In Chapter 2, you changed the font-style of some
text on the Web page using an inline style. Instead of using an inline style, you could have
used the HTML bold tags (<b> </b>) that make text bold. HTML provides a number of
tags that can be used to format text, several of which are listed in Table 3-6.
