Introduction to Cascading Style Sheets

CSS is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS language is human readable and writable, and expresses style in common desktop publishing terminology.

One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps.

Web style sheets have been around for a number of years, but their power and importance went largely unnoticed since few implementations existed. Web authors, anxious to add creativity to their pages by influencing the presentation, began to use Netscape's proprietary extensions rather than the more powerful style sheets. This was quite natural, since Netscape's proprietary extensions could be seen by a significant portion of Web users, while few would see style sheet enhancements.

Today, more and more browsers are implementing style sheets, opening authors' eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets became apparent, as did the disadvantages of continually creating more HTML tags for presentation effects.

Netscape's BODY attributes are now widely accepted on the Web, and have become standardized in HTML 3.2. Yet bgcolor, TEXT and friends simply do not provide the flexibility of style sheets. Most background images would leave a page unreadable to someone whose display only offered 16 colors; many pages are difficult to read with only 256 colors. With conventional BODY attributes, an author must choose whether the benefits of a background image outweigh the costs; with style sheets, an author can offer a number of different images, in different style sheets, so that the user can choose the "24-bit style sheet" or "8-bit style sheet," depending on how many colors his or her system can display. If no author-supplied style suits the user, he or she can simply ignore the author's style.

Style sheets can make an author's life much easier. While one could use the specific width and align tags for every horizontal rule, this becomes very cumbersome for the author. With style sheets, one only needs to specify such presentational preferences once, and the style can be applied to an entire site. And if the author decides that width="50%" would be better, then he or she only needs to change this preference in one place, rather than having to search through hundreds of pages to change the HTML. Not only that, but style sheets also reduce download time when one file contains all the style information.

Style sheets also offer much more flexibility in terms of the presentation effects that they provide. Properties such as color, background, margin, border, and many more can be applied to all elements. With just HTML and its proprietary extensions, one must rely on attributes like bgcolor, which are only available for a few elements. Style sheets give the flexibility of applying a style to all paragraphs, or all level-two headings, or all emphasized text.

With style sheets, authors can use the text-indent property to indent text, rather than resorting to ugly kludges like or (imag source="blank.gif") that carry with them many negative side-effects. Margins can be suggested without having to put the entire page in a table.

Style sheets also reduce the need for multi-file search and replace; if an author decides to change the indentation of all paragraphs on a site, he or she only has to change one line on a style sheet.

Style sheets represent an enormous step forward for the Web. With the separation of content and presentation between HTML and style sheets, the Web no longer needs to drift away from the strong ideal of platform independence that provided the medium with its initial push of popularity. Authors can finally influence the presentation of documents without leaving pages unreadable to users.

The number of browsers supporting Cascading Style Sheets continues to increase rapidly. Netscape Navigator 4.7 features a large amount of support for CSS1 and CSS Positioning and has promised complete support in the upcoming version 5. Microsoft Internet Explorer 5 has partial CSS1 support with a strong level of CSS1 and CSS Positioning implemented in IE4, accompanied by early support for CSS Printing. According to The Web Standards Project the browser that correctly interprets the most CSS is Opera, a new lean, fast browser from Norway. You can get more information about Opera at www.opera.com. Style sheet support on the UNIX platform has long existed with Emacs-W3 and Arena, and the W3C's Amaya browser combines CSS support with a "WYSIWYG" editor for making CSS-enhanced Web pages.

For an overview of the CSS Specification http://webreview.com/wr/pub/guides/style/glossary.html