Cascading Style Sheets

Cascading Style Sheets (CSS) is a new feature of HTML 4.0. Style sheets allow web authors to more efficiently apply style attributes to HTML tags in many documents very quickly. Many formatting tags used for years in HTML 3.2 have been deprecated and will eventually not be supported by web browsing software in the future. The World Wide Web Consortium is encouraging webmasters to use style sheets. It is almost certain, however, that browsers will continue to support all of the old HTML 3.2 tags for several years to come. The construction of internal and external style sheets is covered in chapters 13-15 of HTML 4 for the World Wide Web by Elizabeth Castro, published by Peachpit Press. After reviewing the Castro text, the advice below should be meaningful.

When developing a web site one must always be aware of the degree to which current technologies are implemented in the general population. For example, even in late 1999, a significant number of persons worldwide still browse the web using Netscape 3.0 and Internet Explorer 3.0 which do not support HTML version 4 and therefore do not support CSS. How can a webmaster then develop web sites using CSS that also display reasonably well on 3.0 web browsers? Presented below you will find some advice on the judicious use of CSS to benefit from the efficiencies it offers in site development while retaining compatibility with older browsers. This advice is written in late 1999. By late 2000 a substantially higher percentage of the population should be using 4.0 or 5.0 browsers. Dependence on CSS should be increased gradually. For the time being, webmasters should use only those features in CSS which enhance page appearance but do not alter the readability of the content in substantial ways.

CSS DOs and DON'Ts

1. Avoid depending on CSS for alignment. Version 3.0 browsers will not recognize CSS alignments. There is little point in using CSS for alignment if you still have to use the old HTML 3.2 tags for compatibility with older browsers.
2. Create styles using the DIV and SPAN tags to create custom backgrounds and font attributes for blocks of text. Older browsers will still get the content but without the cosmetic enhancements.
3. Avoid the use of styles for links. Links are at the very heart of the browser interface. Browsing the web becomes much more difficult if each web site has its own rules for how links, visited links, and active links appear. It is frustrating to view a web site and not be certain which words are links and which ones are merely colored for emphasis. Underlining has become the standard format for web links and that practice should be retained unless there is some compelling reason to change it.
4. Use CSS to set the FONT attributes for headers and body text. CSS makes it very easy to consistently apply the old desktop publishing principle of using Proportional Sans Serif fonts for headers and Proportional Serif fonts for body text. Those with older browsers will survive without the font changes but those with newer browsers will enjoy the increased readability afforded by consistent formatting.
5. Use CSS to add color to your headers and background colors to selected text when desired. These features offer cosmetic enhancements that are simply ignored by older browsers.
6. Be aware that if you use CSS to set the line-height attributes for headers and body text, users of Microsoft Internet Explorer 3.0 on Windows 95 will have display problems when viewing your page. Most other early browsers, however, will simply ignore the line height style. If you decide to use line height reduce line heights to 0.8 for multi-line headers. Increase line heights to 1.15 for body text to ease readability.
7. Use CSS to create paragraph indents but also add space between paragraphs using an extra BR tag. If your CSS paragraph indents are the only way the user can tell where your paragraph ends then users with older browsers will be confused.
8. Use CSS for tracking and kerning to create a more typographically rich experience for users with newer browsers.
9. Don't bother with font embedding until a cross-platform, cross-browser technology is available for free to webmasters and works without special plugin software on client computers.
10. Don't depend on the white-space property in CSS to add white space on your web pages. A simple transparent gif does the job just as well and retains compatibility with older browsers.
11. The CSS text-transform feature is only reliable if you can be sure of the fonts on the client's system. Use this feature only if you are using a common typeface in your font attributes. Avoid the use of font-variant:small-caps because few fonts have a small caps version and those that do are not the commonly-available fonts on Macintosh and Windows systems.
12. The CSS position feature should only be used on graphics if you are sure that users are using a 4.0 browser. Otherwise, use Tables and Pixel Shims to achieve the same effect and remain compatible with older browsers.
13. Hiding elements of the page with CSS only works on 4.0 browsers. This feature is most useful when hiding and showing elements appropriate to different 4.0 browsers (Netscape vs. IE). This feature is almost pointless unless the web designer includes browser-detection scripting and conditional statments to hide or show elements as appropriate.
14. Use CSS to set the width of blocks of text set off by the DIV tag. This feature allows web designers to create customized double indents and other special effects. Those with 3.0 browsers will simply view the text using the current window width.
15. Use CSS to set customized borders around page elements to enhance the layout. These borders are simply ignored by 3.0 browsers and cause no problems.
16. Use CSS to change the foreground color of horizontal rules. Those with older browsers simply see a normal horizontal rule. Some versions of the newer browsers, however, do not accurately render foreground color changes.
17. Generally avoid using CSS to set the background color or image for the entire page because 3.0 browsers will respond by simply using the default (usually grey) background. A background can be a highly-defining aspect of a web presentation and its failure to appear on older browsers can make your web design look unprofessional.
18. Use CSS to create customized list item markers for unordered lists. Those with older browsers will simply see the standard bullet.
19. Use CSS to specify page breaks to allow your visitors to print your web pages more easily. This is a nice enhancement to offer those of your visitors with 4.0 browsers.
20. Gradually increase dependence on CSS each year and encourage those who visit your site to upgrade to a contemporary browser.