Creating a Website: The Missing Manual, 3rd Edition

Chapter 6. Style Sheets

Last chapter, you learned HTML’s dirty little secret: It doesn’t have much formatting muscle. If you want your web pages to look sharp, you need to add style sheets into the mix.

A style sheet is simply a document filled with formatting rules. Browsers read these rules and apply them when they display web pages. For example, a style sheet rule might say, “Make all the headings on this site bold and fuchsia, and draw a box around each one.”

You want to put formatting instructions in a style sheet instead of embedding them in a web page for several reasons. The most obvious is reuse. For example, thanks to style sheets, you can create a single rule to, say, format level-3 headings, and every level-3 heading on every web page of your site will reflect that rule. The second reason is that style sheets help you write tidy, readable, and manageable HTML files. Because style sheets handle all your site’s formatting, your HTML document doesn’t need to. All it needs to do is organize your pages into logical sections. (For a recap of the difference between structuring and formatting a web page, see Logical Structure vs. Physical Formatting.) Finally, style sheets give you more extensive formatting choices than HTML alone does. Using style sheets, you can control colors, borders, margins, alignment, and (to a limited degree) fonts.

This chapter has two parts. First, you’ll learn how style sheets work, and you’ll see how to attach a style sheet to your web pages. Next, ...