[]Join Webmonkey, it's free. Members log in.
[Jeff's mug] [Jeffrey Veen]
[Browsers] [Browser Kit]

The Web ... with Style
[]
[Imagemap]

Imagine opening up a text document, editing a couple of lines, and having an entire Web site redesign itself before your eyes. Or, imagine creating pages online with the graphic richness of a print publication, with fonts and margins and overlapping images laid out with precise control, but weighing in at only 10K. Imagine the world of Cascading Stylesheets.

You're all familiar with HTML now, and the amazing limitations it places on graphic design as an expense of cross-platform and cross-browser compatibility. Unfortunately, separating graphic richness from simple documents is not the way the real world works. The rigid structure of HTML may suit academic papers just fine, but it certainly doesn't play in the world of corporate identity, commercial communication, and electronic publications. Why not make everyone happy and create a structured language with powerful design capabilities? Why not keep them physically separate, and only integrate them when a user visits your page? The premise behind stylesheets answers these questions.

It's actually quite simple. You write a standard HTML document, marking it as you normally would with body, headers, paragraphs, and the like. Then you write a separate stylesheet that tells the browser how to render your document. You tell it to make the paragraphs in 12-point Times Roman with 1.5-inch margins, and that the headline should be green, 40-point Helvetica Medium with 42-point leading. Now, in the head of your HTML document, you point to the stylesheet, and then upload them both to your server.

The benefits of separating the structure and style of a document should now begin to appear. You can have multiple HTML documents pointing at one stylesheet, so by changing that sheet, you can effectively change an entire Web site. Also, the stylesheets cascade hierarchically. This means that you can have a number of different stylesheets for, say, different sections of your Web site. One sheet can set the margins of every document sitewide, but other sheets can describe the typography for different sections of your site, or even override the settings of the sheets before them. Truly powerful stuff.

I had a conversation recently with some of the guys at Microsoft who are working on these technologies for their browser. Their 3.0 version of Internet Explorer is currently the only commercial browser that taps into the power of stylesheets.

The Microsoft guys also told me about some interesting font technology that's around the corner. They're releasing a set of eight core Web fonts that will ship with their browser and also be distributed by the World Wide Web (W3) Consortium and other online venues. This arrangement will allow content developers to reference the fonts by name in their documents through stylesheets and know that readers will see the design as it is intended.

The next step, according to Microsoft, Adobe, and a few other players, will be dynamically downloadable fonts. Web authors will be able to create designs using any fonts they want, and then send those fonts down the line when a reader hits the page, much like we do with graphics today. Not only that, but you won't have to download the entire font. Instead, you'll just get the glyphs that are contained in a document. So, if you have a big headline that said "HOTWIRED" in a custom font, you'd only download those eight capital letters. Pretty cool, no?

Welcome

to the 

house of

stylesheets

Threads

Also around the corner is Level 2 of the stylesheet specifications, currently being called HTML Layout Control within Internet Explorer, but I'll cover that in a separate column.

So it looks to me as though we're fast approaching another turning point in Web technology. It felt like 600 years of typography and design was thrown out the window when content migrated to the Web. But now it looks like we'll finally be free of some of the most frustrating technical limitations that online designers have been dealing with. Style and structure - form and function - will come together again.

For more information on stylesheets, see the W3 Consortium's page or Microsoft's Stylesheet Guide.



Jeffrey Veen is HotWired's interface director. He has never had a bad hair day. Ever.


Previously in Browsers ...

HOMESEARCH
HELP

Copyright © 1996 HotWired, Inc. All rights reserved.