How to write style sheets (CSS)

If you wish to use Cascading Style Sheets on Web pages, here's a suggestion on how to do it, especially how to solve problems or preferably avoid them. It is assumed that you have read some introduction to style sheets, such as WDG's CSS Quick Tutorial or Dave Raggett's Adding a touch of style.

  1. Create your HTML document(s) according to good authoring principles.
  2. When you have an idea about a presentational suggestion, check from WDG's reference CSS Properties whether there is a property which can be used and how it is to be used. That way you'll find reliable information about how it should work. Note however that the document is limited to CSS1. If you need newer style sheet features, check the CSS2 specification; beware that is has been implemented to a much smaller extent than CSS1.
  3. Check the implementation status for the features you are going to use, e.g. using Index DOT Css.
  4. If you decide to use CSS for your purposes, write a style sheet according the specifications and associate it with your HTML document.
  5. Check your style sheet using CSSCheck. It is practically certain that you make lots of mistakes in your CSS code, and a checker is therefore indispensable. Note: CSSCheck checks against the CSS1 specification, with support to some CSS2 features. You can use W3C's CSS checker to check against CSS2, but please remember that browser support to CSS2 is still rather limited.
  6. Check your HTML document using a validator. (Naturally, you used a validator already at step 1. You need to validate again, since you have added something to your HTML document in order to associate a style sheet with it.)
  7. Having done that, and having fixed the errors and re-checked your code, see how the document looks like on some browsers. Preferably, test it on all major versions of IE and Netscape from version 3 onwards and on Opera.
  8. Styles don't work? Check whether you have style sheets turned off on your browser, or a user's style sheet overriding the author's style sheet. Note that on Netscape, turning JavaScript off turns style sheet support off too, since it internally implements CSS support on top of JavaScript support. If you are uncertain, try testing your browser with a simple document which uses a simple style sheet.
  9. If problems remain, and you can't find an answer e.g. by using the documents listed under CSS Pointers (see especially CSS Bugs and Workarounds) consider asking for help in the newsgroup comp.infosystems.www.authoring.stylesheets. Please remember to
    Keyword(s):

There is an experimental frameset version of this page. To work well, it requires a rather wide browser window.

Date of last update: 2003-09-09.

Jukka Korpela.