Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 99

Notice that when using an external style sheet, if the use of color or fonts on the page
ever needs to be changed, modifications only need to be made to the external style
sheet. Think about how this can improve productivity on a site with many pages.
Instead of modifying hundreds of pages to make a color or font change, only a single
file—the CSS external style sheet— needs to be updated. Becoming comfortable with
CSS and other technologies such as Extensible Style Sheet Language (XSL) will be
important as you develop your skills and increase your technical expertise.

CHECKPOINT 3.2
1. Describe a reason to use embedded styles. Explain where embedded styles are
placed on a Web page.
2. Describe a reason to use external styles. Explain where external styles are placed and
how Web pages indicate they are using external styles.
3. Write the code to configure a Web page to associate with an external style sheet
called mystyles.css .

FAQ

When designing a new Web page or Web site, how do I begin to work
with CSS?

The following guidelines can be helpful when configuring a page using CSS:
● Review the design of the page—check if common fonts are used. Define global properties
(the default for the entire page) for characteristics such as fonts and colors attached to
the body selector.
● Identify typical elements used for organization in the page (such as <h1> , <h3> , and so
on) and declare style rules for these if different from default.
● Identify various page areas such as logo, navigation, footer, and so on—and list any
special configurations needed for these areas. You may decide to configure classes or ids
in your CSS to configure these areas.
● Create one prototype page that contains most of the elements you plan to use and test.
Revise your CSS as needed.
● Plan and test. These are important activities when designing a Web site.

3.9 Centering XHTML Elements with CSS

Recall that by default, XHTML elements are left-aligned— they begin at the left mar-
gin. In Chapter 2 (Hands-On Practice 2.4) you used the XHTML align="center"
attribute to center text on a Web page. While this is valid, it is more efficient to config-
ure the alignment using CSS. The CSS text-align property configures the alignment
of text. The CSS code sample below configures an <h1> XHTML element to have cen-
tered text.

h1 { text-align:center;
}