Web Development and Design Foundations with XHTML, 5th Edition

(^86) Chapter 3 Configuring Color and Text with CSS
CHECKPOINT 3.1

1. List three reasons to use CSS on a Web page.


2. When designing a page that uses colors other than the default colors for text and
   background, explain why it is a good reason to configure both properties: text color
   and background color.


3. Describe one advantage to using embedded styles instead of inline styles.

3.5Configuring Text with CSS

In Chapter 2 you discovered how to use XHTML to configure some characteristics of

text on Web pages, including logical style tags (such as the <strong>element) and

physical style tags (such as the <small>element). You’ve also already configured text

color using the CSS colorproperty. In this section you’ll learn how to use CSS to con-

figure additional characteristics of text, including font typeface, font weight, font style,

and font size. Using CSS to configure text is more flexible (especially when using an

external style sheet as you’ll discover later in the chapter) than using XHTML elements

and is the method preferred by today’s Web developers.

CSS and Fonts

Let’s take a closer look at the CSS properties useful for configuring fonts:

font-weight, font-style, font-size, and font-family.

Thefont-weightpropertyconfigures the boldness of the text. You can use either

numeric values ( 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , and 900 ) or text values

(including normal(default), bold, bolder, and lighter). Configuring the CSS rule

font-weight:boldhas a similar effect as the <strong>or <b>XHTML element.

Thefont-stylepropertytypically is used to configure text displayed in italics (the

same visual effect as an <i>or <em>XHTML element). The font-styleproperty val-

ues are normal(default), italic, and oblique.

Thefont-sizepropertysets the size of the font. There are a wide variety of text and

numeric values. Text values for font-sizeinclude xx-small, x-small, small, medium

(default), large, x-large, and xx-large. Valid numeric values include units of px

(pixels), pt(standard font point sizes), percentage values, and em. Figure 3.8 demon-

strates examples of text with various font-sizeconfigurations displayed in the Firefox

Figure 3.8
A sampling of CSS
font-size values