CSS: Cascading Style Sheets

CSS is probably the neatest thing that's happened to the web in the past year. The idea behind CSS is to enable web designers to separate content from style. The formatting of the web pages for this site is controlled from one central source.

If you are using Netscape Communicator, you can turn off CSS by selecting Preferences from the Edit menu. Once the Preferences box pops up, click on the Advanced category, and then remove the check mark from 'Enable style sheets'. If you've done that, press the Reload button and you'll see this page without the formatting that's been configured centrally by the style sheet.

(Don't forget to go back into Preferences and turn style sheets back on. While it's useful to see how someone not using an outdated browser would see your site, there's no reason you have to live without.)

There are two useful things from style sheets, one quite simple and the other quite complex. The first is the formatting you see on this page: from one central source I can control the colors of a web page as well as the text itself. You can also control elements like links.

The more complex aspect of CSS involves positioning. Positioning can control where each element appears on a page, and CSS allows you to make things as complex as you like by letting you design layers with text and images.

The problem with CSS positioning is that Netscape and Microsoft have their own preferred way of interpreting the elements that control where things appear. The result is that a page using CSS positioning looks different in Communicator than it does in Internet Explorer (for the record, IE 4.0 does the better job of interpreting positioning elements than Netscape; but both browser makers have vowed to be fully compliant with the CSS standard.

As ever, you need to consider whether the percentage of people visiting your site with outdated browsers is significant enough to prevent you from using CSS extensively. At Richmond, University Computing has made the move this Summer to make Netscape 4.04 the supported browser on campus. Between their decision to move to the current generation of browsers and my own sense that students tend to stay up with new software (especially free software), I've used CSS in the design of the Registrar's home pages.


H O M E

 

Compatibility

IE 3.0 +
Netscape 4.0 +

Examples
See It
Try It
Reference
Tools