HTML, XHTML & CSS

Chapter 9: Introducing Cascading Style Sheets
For example, these three style rules set the colors for first-, second-, and
third-level headings:
h1 {color: teal;}
h2 {color: maroon;}
h3 {color: black;}
The CSS specification lists exactly which properties you can work with in
your style rules and different values they can take. Most are pretty selfexplanatory
(color and border, for example). See “What you can do with
CSS,” earlier in this chapter, for a quick rundown of properties included in
the CSS2 specification.
Style sheets override a browser’s internal display rules; your style declarations
affect the final appearance of the page in the user’s browser. This
means that you can control how your content looks and create a more consistent
and appropriate experience for visitors.
For example, the following style rules specify font sizes (in percentages, relative
to the base font) for first-, second-, and third-level headings:
h1 {font-size: 300%;}
h2 {font-size: 200%;}
h3 {font-size: 150%;}
Figure 9-1 shows a simple HTML page with all three heading levels (plus
some body text) without the style sheet applied. The browser uses its default
settings to display the headings in different font sizes.
Figure 9-1: An HTML page without style specifications.
135