Cascading style sheets

This division between structural logic and visual logic is on its way to being reconciled through the use of Cascading Style Sheets (CSS). Style sheets provide control over the exact visual style of headers, paragraphs, lists, and other page elements. For example, if you prefer H3 headers to be set in 12-point Arial bold type, you can specify those details in a style sheet. In this way you can retain the logical use of HTML's structural tags without sacrificing graphic design flexibility.

At this writing, however, the major Web browsers offer inconsistent and incomplete CSS support. Although both Microsoft Internet Explorer version 3.0 and higher and Netscape Navigator version 4.0 and higher support CSS, their exact implementations of it differ. A most frustrating example of this is the margin property. Standard HTML headings float far above the paragraphs they describe. With style sheets authors can designate more suitable margins in a heading style declaration. Yet the Netscape browser adds the designated amount to the standard margin, whereas Explorer simply adds the margin defined in the style sheet. The upshot is that until the browsers offer a more consistent implementation of CSS, only a handful of properties can be used reliably.

Screen shot: English 2-3 page in Internet Explorer and Netscape Navigator

www.dartmouth.edu/~engl02

So what do you do when you know the advantages of preserving the document structure but you want to design Web pages that are attractive and functional enough to capture and sustain an audience? You compromise. In the sites we create we use a grab bag of tricks to present as polished and sophisticated a page design as we can manage within the boundaries of "official" HTML. We use no proprietary HTML tags, such as those specific to Internet Explorer or Netscape Navigator. Our approach to typography emphasizes visual design over structural purity. Wherever possible, we use "plain vanilla" HTML to describe document structure and CSS to define visual layout. We do not strive for complete control and consistency for our pages but instead accept a certain degree of variability between platforms and browsers. Where CSS falls short, however, we dip into our grab bag of tricks rather than sacrifice visual integrity. We believe that this is the best compromise until everyone can shift over to a mature implementation of CSS and leave plain HTML behind.

Advantages of CSS

This book is not a manual on HTML, and covering the full design implications of Cascading Style Sheets is well beyond the scope of this chapter. If you are not using CSS to manage the graphic design of your Web site, however, you should at least be planning a transition to CSS technology within the next year.

Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites:

Separation of content and design. CSS gives site developers the best of both worlds: content markup that reflects the logical structure of the information and the freedom to specify exactly how each HTML tag will look.
Efficient control over large document sets. The most powerful implementations of CSS will allow site designers to control the graphic "look and feel" of thousands of pages by modifying a single master style sheet document.

Style sheets provide greater typographic control with less code. Using plain HTML, you need to define the physical properties of an element such as the <H1> tag each time you use it.

<H1 ALIGN="center"><FONT FACE="Verdana, Helvetica, Arial, sans-serif" SIZE="6" COLOR="gray">Section heading</H1></FONT>

When you define these properties using CSS, that single definition, or rule, applies to every instance of the <H1> element in all documents that reference the style sheet.

H1 { text-align: center; font-size: 16pt; font-family: Verdana, Helvetica, Arial, sans-serif; color: gray }

In addition, style sheets offer more formatting options than plain HTML tags and extensions. For example, interline spacing, or leading, can be controlled using style sheets, as can such text properties as letterspacing and background color. And fortunately the text formatting properties are implemented well enough across browsers to be used with some consistency.

How style sheets work

Style sheets are not new. Every graphic Web browser (even back to Mosaic 1.0) has incorporated style sheets. It just wasn't possible to modify the fixed styles that browsers used to determine, for example, exactly how H1 headers look on the screen. The fundamental idea behind CSS is to let site authors and users determine the size, style, and layout details for each standard HTML tag.

If you have ever used the "styles" features of a page layout or word processing program, you will understand the basic idea behind CSS. The styles feature of a word processor is used to determine exactly how your titles, subheadings, and body copy will look, and then the copy is formatted when you apply a style to each element. Once all the copy has been styled, you can change the look of each occurrence of every element simply by changing the style information. CSS works in the same way, except that with CSS you can set up one master style sheet that will control the visual styling of every page in your site that is linked to the master style sheet:

Screen shot: Howard Hughes Medical Institute Laboratory Safety Training page with linked style sheet

info.med.yale.edu/caim/hhmi

TYPOGRAPHY
Characteristics of Web type
Structure & visual logic
• Cascading style sheets
Legibility
• Alignment
• Line length
• White space
• Typefaces
• Type size
• Case
• Emphasis
Consistency
Cross-platform issues
Accessibility
Type graphics
References

EDITORIAL STYLE

GRAPHICS

MULTIMEDIA

Print this page | Print this chapter

Jump to top

Buy Web Style Guide, 2nd edition at Amazon.com

PREVIOUS: Content structure and visual logic | NEXT: Legibility