CSS Simplifies Your Life Part(I)

Old hat? Then why aren't you using them?

Last month we looked at Dynamic HTML and how to use it. The knowledge of Cascading Style Sheets greatly facilitates the use of Dynamic HTML, and many of our readers asked for more info on CSS to help them get started.

By now most of us are aware that Cascading Style Sheets can be used to control style and layout of a Web page, or build a style sheet "standard" that can be repeatedly used on a Web site. This "template" approach to designing a site enables developers to create a consistant look for corporate documents, while keeping style separate from content.

Want to change the way a page looks? Simply change the Style Sheet once and all the pages which use that style are instantly changed as well. So why haven't more people been using Style Sheets? Aside from the fact that only the 4+ browsers (Navigator 4+ and MSIE4+) can use them, perhaps it's because folks simply don't know how useful they can be, and how simple they are to use.

The use of CSS can be seen on many of today's leading Web sites, including WebReference.com and CNET, among others. If you visit the sites using one of the aforementioned CSS-capable browsers, you're seeing CSS in action. On the page you're currently reading, for instance, all of the font styles and headlines are controlled by Style Sheets instead of FONT tags. And the pages actually look almost identical under both MSIE4 and Netscape4, as the basic style sheet format is supported by both of them.

If you're wondering whether the same CSS specification is used by both browsers, the answer is yes...almost. Although CSS will work for either browser, each has its own methods of utilizing dynamic HTML and style sheets. Netscape is favoring the use of JSS, or JavaScript Style Sheets, which are characterized by the TYPE="text/javascript" parameter of the STYLE tag. The format for the CSS used by JavaScript SS is different as well.

Likewise, Microsoft has made it extremely easy to use CSS to dynamically create dynamic effects. For instance, if you are using MSIE4, run your mouse over the words "Old hat? Then why aren't you using them?" at the top of this page. That little effect uses one line of code:

<H4 onMouseOver="this.style.color='blue'" onMouseOut="this.style.color='gray'">

Most CSS techniques, however, may be used for both browsers. Did you notice that the hyperlinks on this page are not underlined? One line in the Style Sheet did that for the whole page, using the "text-decoration" property:

A:link { background: white; color: blue; text-decoration: none; }

If you're using an older version of Netscape or MSIE to view this page, it simply shows plain, unformatted text. Or rather, if the text is enclosed by a normal HTML tag, the normal effects of the tag are what shows up in the browser.

From WebDeveloper.com