Categories World Wide Web

Continued from Aural Style Sheets

One of the greatest shortcomings of HTML--or any similarly structured markup language--is that content and formatting are intermixed. For example, the <TABLE> tag tells the browser to display an element as an HTML table. You can define the look and feel of the table by setting attributes for the table and its elements, such as width and alignment. If you want to change the look and feel of all the tables in your page, however, you need to reformat them one by one. If you want to change the look and feel of all the tables used at your Web site, you have to edit every single table in every page at your Web site--a tedious and time-consuming process, to say the least.

Yet the inflexibility of structured HTML is often the least of your worries. When you use advanced elements, such as frames, you run the risk of breaking older browsers. To compensate, you have to define a page for browsers that do not use frames, which means you now have to create and maintain two versions.

Add layers of information to this frame- enhanced page with the <LAYER> tag and you'll run into a similar problem. Currently only Netscape Navigator 4.0 or later displays layers in this manner. Thus if you use layers, you also need to define a page for browsers that do not support them. Now you have three different versions of the same page.

CSS-2's visual rendering model allows you to separate content from formatting by defining each formatted element in a document as a container or box that holds content. Within the box, there could be additional boxes that are defined for subelements, such as the header and data cells of a table. Keep in mind that these containers apply only to formatted elements--such as paragraphs, divisions, and tables--and not to text that is merely styled with physical tags, such as the familiar <B>, <I>, and <U>.

Treating elements as containers opens the door to a whole new way to handle Web page design and finally provides a well-developed way to separate the content from the formatting. By controlling the flow of content within a box, you can control its layout. By controlling the position of a box, you can precisely position the box on the page. By controlling the type of box, you can define various types of containers, such as tables, frames, and even layers.

When you define advanced elements (such as frames or layers) in a style sheet, you don't have to worry about breaking older browsers, nor is it necessary to create several different versions of the same page. You simply define the formatting rules in the style sheet. Compatible browsers render the page precisely as you've defined it. Other browsers simply ignore the noncompatible style sheet definitions.

But the fun is only beginning. Have you ever wondered what it would be like if you could apply a set of advanced formatting rules to your entire Web site instantly? CSS-2 lets you do just that. You simply define the layout rules for your Web site in an external style sheet. Then when you want to apply layout changes, all you need to do is change the external style sheet. Because these external style sheets can define tables, frames, and layers for pages, you can dramatically and easily change the look and feel of your entire site.

Next: Summary and Resources

Published as Internet User in the 12/1/98 issue of PC Magazine.