Creating Web Sites: The Missing Manual [Paperback]

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.

Style sheets are separate documents that are filled with formatting rules.The browser reads these rules and uses them to format your Web page.For example,a style sheet rule might say,"make all headings bold and fuchsia and draw a box around each one."

There ’s several reasons that you place formatting instructions in a style sheet instead of directly in a Web page. The most obvious one is reuse .For example, thanks to style sheets,you can create a single rule that you can use with every levelthree heading in every Web page on your Web site.The second reason is that style sheets help you make tidy, manageable HTML.Because they do all the formatting, your HTML code doesn ’t need to.All your HTML needs to do is organize the page into logical sections. (For a quick recap of the difference between structuring and formatting a Web page,refer back to page 112.)

The formatting choices in style sheets are much more extensive (and much more overwhelming) than those in HTML alone.Using style sheets,you can control colors, borders,margins,alignment,and (to a limited degree)fonts.You ’ll use style sheets in this chapter and throughout this book.As you ’ll see,style sheets give you options that can jazz up the dullest HTML.

Style Sheet Basics

Style sheets are officially known as the cascading style sheet (CSS)standard.CSS is a system for defining rules about how one or more Web pages should be formatted. When you use CSS in a Web page,the browser reads both the page ’s HTML and the style sheet rules.It then uses the style sheet rules to format the page. Figure 6-1 diagrams the process.

This system gives Web weavers the best of both worlds —a rich way to format pages and a way to avoid mucking up your HTML beyond recognition. In an ideal world, the HTML document describes only the structure of a Web page (what ’s a header, what’s a paragraph, what ’s a list, and so on),and the style sheet explains how to give that Web page a hot new look.

The Three Types of Styles

Before you even get started learning how to write CSS rules,you first have to think about where you ’re going to place those instructions.CSS gives you three different ways to apply style sheets to a Web page:

•An external style sheet is a style sheet that ’s stored in a separate file.This is the most powerful approach,because it completely separates the formatting rulesfrom your HTML pages.It also gives you an easy way to apply the same rules to many pages.

•An internal style sheet is a style sheet that ’s embedded inside an HTML document (it goes right inside the element).You still have the benefit of separating the style information from the HTML,and if you really want,you can copy the embedded style sheet from one page to another (although it gets difficult to keep all of those copies synchronized).Really,the only time you ’ll use an internal style sheet is if you want to give someone a Web page in a single file — for example,if you ’re emailing someone a Web page.

•An inline style is a method for inserting style sheet language directly inside an HTML tag.You’ve already learned that it ’s a bad idea to embed formatting inside a Web page document, because these details are ugly and long. However, you might occasionally use this approach to apply one-time formatting in a hurry. It ’s not all that clean or structured, but it does work.

Up to Speed
The "Other Way " to Format a Web Page

Style sheets aren ’t the only way to format a Web page — they ’re just the most capable tool.But you ’ve also got a few formatting options built right into the HTML tags you learned about in Chapter 5.For example,you can change a page’s background color or center text without touching a style sheet.For the most part,this book doesn’t use these formatting options,for several good reasons:

•They ’re patchy and incomplete.Many features (like paragraph indenting and borders)are completely missing —no HTML tags exist to achieve these effects.Even worse,the model isn ’t consistent —for example,you might be able to line up text in onetype of tag,but not the text that ’s contained in another type of tag.This makes the model difficult to learn and remember.

•According to the HTML standard,these formatting options are deprecated. That means that even though these formatting tweaks are still supported by most browsers, they ’re considered obsolete by the official rulemakers of the HTML standard —that ’d be the good people who work at World Wide Web Consortium (W3C).Many people didn ’t like these fancy flourishes in the first place,but they were wedged in by over-eager software companies such as Microsoft and Netscape. Newer devices(for example, browsers on tiny mobile phones)are more likely to ignore these instructions altogether. Even worse,if you use them,your hard-core Web designer friends won ’t sit with you at restaurants.

•They don ’t allow you to easily reuse formatting changes.So after you format one page,you need to start all over again to fix the next page.And so on,and so on,and so on.

•They won ’t work in XHTML.Right now you might not be concerned about creating XHTML pages (page 47),but by using style sheets,you ’ll simplify your life if you ever decide to switch your Web site over to this new Web standard.

•Why learn something you don ’t need? Seeing as style sheets offer so much more power and flexibility,and now that style sheets are supported (with certain limitations)on virtually every browser around (old and new),it doesn ’t make sense to waste time with something you ’ll outgrow anyway.