Cascading Style Sheets

Computerworld - Cascading Style Sheets (CSS) will definitely change the way you think about the Web.

CSS in Action For a truly elegant implementation of CSS, check out the Web site of Büttenpapierfabrik Gmund GmbH & Co. a specialty paper producer in Gmund am Tegernsee, Germany. Although the page source code seems daunting, the results of using style sheets are well worth the time and effort. The Web site appears to be laid out as an image map, with many overlapping rectangles carefully arranged in a graphics program, each one carefully coded in HTML to link to its page. It could have been done that way, but then changing any single image in the collection would have required reworking the entire graphic. With CSS, however, swapping out any single image layer is quick and easy: Just change the entry in the style sheet, and you’re done. — Joy-Lyn Blake

With this technology, you can create reusable code that acts as a style sheet to define typographic and color information, position objects and control or change the look of an entire Web site, all from a single file. Style sheets let you control how a Web page is rendered without compromising its structure. You can do that to some extent with the Web protocol HTML, but CSS allows for pixel-precise positioning of elements within a page.

We've gotten used to the premise that page structure - including paragraphs, lists, tables and frames - is dependent upon coding practices. The more intricate the page structure, the more complex the coding required. Many Web pages have become little more than deeply nested layers of tables, font tags and line breaks - a nightmare to troubleshoot, rearrange or redesign.

Style sheets let Web authors accomplish the same result without all that messy HTML coding. Anyone who's ever had to troubleshoot HTML code knows how difficult it can be to track down errors.

Imagine the HTML tagging necessary to create a Level 1 header (H1) that sets the font of a passage of text and also calls for the text to be dark red, italic and underlined on a blue background, with a repeating horizontal image and a border around all. And you want a margin only at the top of the bar, not the bottom. HTML requires a table to accomplish this, along with the requisite tags controlling font color, font face and underlining. But the cell-padding parameters apply equally to the top and bottom of the cell, so there go your margin specifications.

CSS, however, gives you full control, without multiple tags or the need to wrap the entire element in a table. Here's the CSS code for the above example: H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; background: blue url (titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;}.