CSS Tips

A Process to Learn CSS

  1. Forget everything you thought you knew about "Web Design".
  2. Start focusing on the content, its structure, and its semantics.
  3. Start to build sites around the content, first trying to pay attention to how it is structured so that the least-capable of browsers (text, PDA, no CSS, no JavaScript, etc.) will display it properly. And so that the CSS can be keyed off structure and semantics.
  4. Add presentational aspects by using CSS, keyed off the semantics and structure of the document.
  5. Test in as many browsers as practicable, using representative browsers where appropriate. Always code in a more compliant browser to start with (Mozilla, FireFox, Netscape 7, Opera, Safari ) and then break your site to work in Internet Explorer, because it is Internet Explorer that gets things wrong.
  6. Try to stay away from CSS hacks as much as possible because solving one bug by another is not a good method of keeping Web Design simple. CSS hacks are clever tricks which take advantage of browser bugs to perform such magic as "hiding" CSS from specific browsers or kicking browsers that don't follow the specs into line. They go beyond bad coding style because with the next release of a browser you could end up with a hack that applies an extra rule you no longer need, or with a necessary extra rule that isn't applied any more. Send a clear message that we use standards.

This is the process that I went through. It is a more natural way to approach web design. CSS and other web standards have forced many of us to reconsider how sites are marked up, to simplify, and concentrate on structure and semantics.

Using CSS will make your design and layout much harder at first, because you'll have to break a lot of old habits and learn a surprisingly subtle and complex new technology. Once you've climbed that learning curve, though... well, testimony from many authors indicates that you'll be immensely glad you did.

For an example of the process that one site used to redesign with standards and CSS visit Web Page Reconstruction with CSS by Christopher Schmitt.

<< previous | next >>