Creating a Website: The Missing Manual, 3rd Edition

Tutorial: Building a Style Sheet

You’ve now explored a huge range of formats you can apply to web pages, from psychedelic colors to fancy fonts. Even though you know what style sheets can do, you’re probably less sure about how to build a practical style sheet—one that condenses complex formatting down to a simple set of rules, but remains flexible enough to grow with your website.

That’s OK. Creating style sheets is an art and takes a fair bit of practice. The following tutorial will help get your mind in gear.

Creating a Well-Structured Style Sheet

Before you can write any style sheet rules, you need to think hard about your web page and how you structured it. For example, imagine your website includes the page of book reviews shown in Figure 6-18.

Figure 6-18. In the average HTML document, you have a sea of similar elements—even a complex page often boils down to just headings and paragraph elements. This page has a general introduction followed by a series of book reviews. The page’s author marked up the general introduction, the author credits, and the book summaries with <p> elements, but these components shouldn’t all have the same formatting because they represent different types of content. A better approach is to format the different types of content (title, author, and description) in different ways.

First, it makes sense to lock down the standard details. For example, you might ...