Document Structure
Use style sheets for presentation

Before CSS, designers avoided structural tags because the browser, not the designer, determined their visual appearance. Browsers did not always make the most elegant decisions about formatting, creating huge headings, lists bulleted and indented, and paragraphs marked with a blank line, to name a few. To get around these defaults and to gain control over visual formatting, we constructed pages using nonstructural tags, such as FONT and B, tables for layout, and images for page elements.

These methods served the visual aspect of the Web, but at a cost. Web pages coded with presentation markup are heavy with unnecessary code. Complex layout tables are easily broken, and changes to page elements designed as images require significant effort. As a result, we tend not to make changes to sites designed this way because, like a house of cards, one small change could bring the entire design crashing down.

Now that CSS is well supported in browsers, there is no need to resort to “old-school” design methods. We can use styles to override browser formatting and to apply visual formatting to structural elements. CSS offers more control, in fact, than presentation markup—for example, typographic control over leading and tracking is available using CSS.

Style sheets offer control over nonvisual attributes as well. With aural styles, we can design the audible experience of our Web pages. For example, we can control the voice type and inflection used for reading different elements—perhaps using a female voice for links and a male voice for all other content. Another useful aural style is the “speak” style, which can be used to tell screen reader software whether to speak (XEROX) or spell out (WWW) abbreviations and acronyms.

Other benefits of CSS are consistency and ease-of-use. When content is marked up structurally, one CSS document can control the design of all linked documents. With one master style sheet, all headings share the same visual properties, all paragraphs, all lists, and so on. Changing visual attributes is easy: One small change to the style sheet is all that’s needed to change the page background color, or to use a different typeface. Major redesigns can be accomplished without ever touching the content pages (Figure 2.5).

Figure 2.5: CSS Zen Garden screenshots

Figure 2.5: CSS Zen Garden is an illustration of the range of designs that can be accomplished using Cascading Style Sheets (CSS). Different style sheets are applied to the same HTML document to produce these (and many more) distinctive pages.

When content and presentation are separate, custom views are easy to provide by applying different style sheets. Designers can offer different versions—for example, a large-type version, a high-contrast version, a printing version, and different versions for various devices. Users with specific needs can then apply their own custom style sheet that meets their access requirements.