By Dell Burner, 17 May 2001
With the release of Netscape 6.0 earlier this year, we finally have comprehensive support for the original Cascading Style Sheets specification (CSS1) from the two major browsers.
Millions of people will continue to use older browsers, and designing for the Web may always be a complex and thorny proposition. But the gradual acceptance of CSS1, and the innovations promised by CSS2 and the still-unfinished CSS3, should motivate designers to add style sheets to their Web palettes.
Not only do style sheets give designers the control over layout they have sought for years, they may be the greatest hope for returning the language of the Web, HTML, to its original paradigm.
Style sheets separate meaning from presentation, foster platform and device independence, support content reuse and adaptive/interactive pages, and work well with reader-oriented models of the communication process. This paper will take a closer look at each of these advantages of Cascading Style Sheets, and then hazard a glimpse toward the future to see what lies ahead.
HTML, the primary language of the Web, is a subset of SGML, one of the pioneering structured document formats. The goals of SGML and its offspring HTML are to encode a document's logical structure, not its presentation or final appearance (Lie & Saarela 96).
But designers have found ways to bend and shape the original HTML specification to their needs to control the appearance of Web pages. This has resulted in documents weighed down by heavy use of tables and tags. Not only does such coding practice stray from the intent of HTML, it slows page-loading times.
One of the goals of the original CSS1 specification as adopted in 1996 was to restore the separation of a document's logical structure and its physical presentation. Style sheets allow designers to create lean HTML pages that outline the top-level semantics with heading, paragraph and division tags, and leave the details of font styles, text and background colors in a style sheet.
Cascading style sheets enable us to get more control the right way: by separating the part that defines structure from the part that defines form. The HTML remains clean and simple, as originally intended, and the CSS code controls appearances from afar" (Mulder).
To be true to this intent, Nielsen argues for the use of linked style sheets instead of embedded styles because they allow designers to alter the appearance of an entire site by changing just one document, and minimize page sizes.
"If you use a single style sheet for your entire site, that file will be a single download once and for all" (Nielsen 81).
Such practical considerations, along with greater control over layout and presentation, may sell more designers on using style sheets. But the idea of dividing style and structure is more than an abstract and grandiose goal. By keeping complex presentation rules separate from the HTML document, style sheets help make documents simpler and easier to manipulate, which in turn helps uphold the goal of platform independence.
As major browsers implement more of the CSS2 standard, designers can use style sheets to make Web pages work on multiple platforms and output devices.
Designers can use the MEDIA attribute to refer to a linked style or use the @media rule to define styles for multiple media types in an embedded style sheet sheet (see Figure 1 on Page 3).
Designers may also use the @import rule to point to a style sheet somewhere else on the web that contains rules for other display devices.
CSS2 also opens the way for separate style sheets to render the same HTML document into speech, using a synthesizer plug-in on the client computer, or on Braille printers (Thomas 90). "Aural" style sheets as defined by CSS2 allow the designers to set properties such as speech-rate, voice-family, pitch, pitch-range and volume.
When browsers fully support these features, style sheets will give designers powerful tools to communicate effectively with visually impaired users.
As Hakon Lie, one of the creators of the original CSS specification, notes: "Such media-specific style sheets enable designers to carefully describe presentations for groups of devices while the underlying documents remain device-independent" (Lie & Saarela 99).
Style sheets make it easier to implement two of the most significant trends in information design, single-sourcing or automated publishing, and the use of interactive and adaptive Web techniques.
CSS allows greater control over the display of pages that are assembled "on the fly" from a database for multiple output devices. Designers can create media-specific style sheets that adapt the same content to differing uses.
An @media handheld rule could tell the browser to stop displaying images and normal paragraph formats on pages to be viewed by palm-top computers and cell phones, and enable display of only special formats designed to fit on a tiny screen.
Used in tandem with the powerful meta-data features of the Extensible Markup Language (XML), style sheets can become one of the building blocks of a content management system that allows publishers to achieve the goal of writing once and reusing in multiple formats.
XSL, the Extensible Stylesheet Language, is designed to bridge the gap between XML and CSS in helping publishers create their own markup languages (Thomas 90). But when used with style sheets, plain vanilla HTML remains a potent force for automated publishing. In "Multipurpose Web Publishing," Lie argues that despite the fanfare over XML and XSL as metalanguages for use in database publishing, "Our central claim is that HTML, together with style sheets, should be rich enough to serve as a master document format for many publishers" (Lie & Saarela 100).
CSS2 also allows pages to respond to user actions without the use of scripting languages, although browser support is inconsistent. Internet Explorer 4.x and 5.0 both implement the pseudoclass hover, which allows link color, text size and style, and even background color to change with a mouseover. The cursor property enables designers to specify what style of cursor will be visible on mouseover of different page elements.
"In general, such declarative data formats as HTML, XML and CSS are recommended for stylistic effects in multipurpose publishing. Declarative data, which is easily converted to other formats, is more likely to be device independent and tends to live longer than programs" (Lie & Saarela 101). Designers of international websites could use the direction property to provide right-to-left text for users who prefer to read in such languages as Arabic and Hebrew.
As style sheets develop and browsers implement the changes, designers will be able to create more layout effects that respond to user actions without programming, moving closer to the goal of providing websites that adapt to the needs and preferences of their users.
CSS was originally intended to enable a variety of styles to interact or "cascade." The goal was to allow a broad, general document to adapt to increasingly specific needs at the local level.
For example, a group within a business may override certain aspects of a global corporate style sheet using embedded styles and/or inline styles. The end user may override some or all of both. In Internet Explorer users have the option of setting their browser to ignore colors, font styles and font sizes on Web pages, and can direct the browser to refer to their own style sheet.
While the "cascade" complicates the task for designers seeking strong authorial control over page display, it empowers the user and upholds the theories of those such as Redish who argue that the reader ultimately makes meaning from a document.
Style sheets set up a system for yielding control to the reader, which helps them accomplish their goals in the manner described by Redish: "As the readers formulate representations and strategies, they are also influenced both by the content of the message in the document and by the ease or difficulty of using the document, that is, by its organization, format, syntax, and vocabulary" (Redish 8).
The style sheet approach provides a chain of precedence, with local style overriding global style, but giving both author and reader the power to override each other's style by use of the !important attribute.
Nielsen, however, cautions this property should never be used in a website's style sheets. "It is hard to imagine cases where you would be justified in ignoring the user's preferences if the user felt strongly enough to use his or her own !important rating" (Nielsen 85).
Authors seeking total control are free to present information using MS Word or PDF files, to name two examples. The W3C designed style sheets to engender a balance between author and reader. "If you, as an author, find this acceptable, you'll use HTML; if not, there are a large number of alternatives" (Korpela 106).
As designers wait for the major browsers to more fully support the features of CSS2, work is well under way on CSS3.
A World Wide Web Consortium (W3C) working draft released April 6, 2001, outlines some of the proposed changes, including new selector types, running headers/footers, new properties to create flexible column layouts, improved aural style sheets, an attempt to provide style properties for mathematical expressions, and a proposal to use CSS syntax to attach behavior to elements, such as dynamic changes based on user events.
The W3C working group in charge of CSS has decided to modularize the new specification partly to make it easier for the major browser providers to phase in support for new specifications in a less haphazard manner.
With Hakon Lie as its chief technology officer, the free browser Opera can be expected to push Microsoft and AOL to more fully implement CSS2 and future improvements. Increased browser support and the gradual phase-out of older browsers will pave the way for style sheets to become a more consistent and reliable way to design for the Web, and an integral part of any designer's tool kit.
In the five short years they've been in existence, Cascading Style Sheets have been responsible for equal amounts of hope and headache.
Designers have always had to weigh the more precise control they offer over layout against the inconsistent support from 3.x and 4.x versions of Netscape and Internet Explorer. To fully implement CSS, designers have had to invent nearly as many tricks and workarounds as they did when using HTML code to control the look of their Web pages.
But as major sites slowly abandon the older browsers and more users upgrade, the future for style sheets is brighter. This year for the first time Netscape, IE and Opera have all fully implemented the original CSS1 specifications, and the latter two browser providers are well on their way to full CSS2 compliance. Testing is still critical, but the success rate should continue to rise.
As the Web reaches its potential to become an adaptive, interactive and multipurpose publishing medium, Cascading Style Sheets should continue to be an integral part of the communication process.
Korpela, Jukka. "Lurching Toward Babel: HTML, CSS, and XML." Internet Watch, July 1998, 103-106.
Lie, Hakon, and Janne Saarela. "Multipurpose Web Publishing: Using HTML, XML, and CSS." Communications of the ACM, 42/10, 95-101.
Mulder, Steve. "Using Style sheets with IE 5." Webmonkey. http://hotwired.lycos.com/webmonkey/ Accessed May 10, 2001.
Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity. Indianapolis: New Riders. 2000, 81-85.
Powell, Thomas A. HTML: The Complete Reference. Berkeley: Osborne/McGraw-Hill, 1999, 328-404.
Redish, Janice C. "Understanding Readers." In Techniques for Technical Communicators.
Thomas, Brian. "Cascade Effects." IEEE Internet Computing, Jan.-Feb. 1999, 89-90.
Meyer, Eric A., and Bert Bos. "Introduction to CSS3: W3C Working Draft, 6 April 2001." http://www.w3.org/TR/css32-roadmap/. Accessed May 13, 2001.