Number 209 - October 2000

Styling the Web
from Glenn Fleishman's Web Watcher column, Adobe Magazine, Autumn 1999
Web designers often look longingly at desktop-publishing tools for two features. First, they want style sheets. which provide a central repository of defined type and paragraph characteristics that can be applied, reused, and updated across a document. And second. they want the ability to place objects in precise locations on the page.     The Cascading Style Sheets (CSS) specification. supported in large part by Microsoft Internet Explorer, Netscape Navigator, and the Opera Web browser. fulfills both wishes. CSS provides a framework for managing complex Web pages without using local formatting and kludgey positioning tricks. Best of all. CSS works similarly on multiple browsers and platforms. although for best results you will have to keep in mind some minor differences among browsers and platforms.     The idea of style sheets comes to us from the pre-desktop-publishing days. Back then. when designers needed to do elaborate formatting for body copy. headings. and so on. they would create a list of specifications--on a typewriter, even--and assign a number to each style. When a typesetter saw a circled 1, for instance. he or she referred to style 1 on the style sheet and carried out its specifications.     This concept of "define once in a central location and apply many times throughout a document" carried over into early word processors and page-layout programs, like Microsoft Word and Aldus (now Adobe) PageMaker.     In every program that supports style sheets, the behavior tends to be the same: you define the style once in a style-sheet editor, select ranges of text or one or more paragraphs, and apply a style. Changing the style definition updates all occurrences of text assigned that style in a single document or, depending on the setup and the application, across many documents that link to the same set of external style sheets.     After several years of hand-coding type specifications, Web designers have greeted CSS with a great cheer, as it mimics the simple, powerful approach of style sheets. CSS defines all of the things that you might want to specify for Web text, including font attributes, color, lines above and below a paragraph, absolute	positioning, and so on. You can wrap these specifications into a style sheet that gets placed in the head portion of an HTML page or in a stand-alone style-sheet file that many pages can reference.     Stand-alone style sheets can be referenced by anyone, anywhere, opening up possibilities for company-wide and worldwide style sheets. The World Wide Web Consortium (W3C) has set up an experiment in shared CSS specifications that they call the W3C Core Styles--see www.w3.org/StyleSheets/ Core.     You can also apply CSS specifications to individual objects (in other words, use it for local formatting). This is handy when you want to position elements on a Web page with great precision, on every platform and browser, without using invisible spacers or weird table structures.     If you combine CSS with Java-Script, you get the much-vaunted Dynamic HTML (DHTML), which uses CSS's absolute positioning and JavaScript's interactivity to provide animation of objects, either on their own or in response to user actions.     Both Adobe GoLive and Adobe InDesign support CSS, and GoLive takes advantage of DHTML. In GoLive, you can place objects wherever you like on a page using the program's "floating boxes:' A full-fledged CSS editor lets you create and modify styles; GoLive can preview the majority of CSS effects. InDesign offers a CSS option in its Export HTML filter, which preserves text formatting via CSS.     Significant CSS support appeared only in the 4.0 releases of Navigator and Explorer, and in Opera 5.0. Future releases promise even better support for more features, including the newer CSS2 specification. (For an incredible chart analyzing every feature's support in major browsers, see webreview.com/wr/pub/guides/ style/mastergrid.html.)     CSS doesn't turn the Web into PageMaker--nor should it--but it's a large step toward greater typographic control and sophistication for Web design.     Glenn Fleishman, co-author with Jeff Carlson of the recently released Real World Adobe GoLive 4 ( Adobe Press, ISBN 0-201-35474-8), can be reached at glenn@glenns.org.
Number 209 - October 2000