4 Levels of CSS knowledge

I believe that there are milestones in a web designer’s pursuit of CSS mastering. Usually at early stages, some think that they are CSS gurus already, only to find out that there are alot more still to learn. I think there are 4 levels and each level in itself will take weeks / months to master.

1. Basic Appreciation

If you’ve never used CSS before, then having a basic understanding and appreciation of why people use CSS would be a real eye opener. Its almost like re-learning how to build websites all over again in a totally different way, so this means you will also need to change the way you plan and design.

CSS Introduction at w3schools.com is one good place to start. Also if you wanna read about why learn CSS at all, you might want to read the book that changed the web design industry, the very famous Designing With Web Standards by Jeffery Zeldman.

2. Styling Items

To style an item using CSS is the easiest part. Adding color, padding, etc. all these are the most basic.

A good tool would be css-ref.com.

3. Styling a Page

Now things start getting tricky when you use CSS to control layout. The main thing would be to stop using tables for layout as tables are meant to display data or information.

The one confusing item you would hit would definitely be the floats and clears.

The one website that helped me understand this best is Russ Weakley’s Floatutorial.

4. Styling a Site

If you already know how to style items and layouts, then styling a full site might still be challenging.

The normal problem faced is that ID and CLASS declarations are not well planned, hence causing alot of unnecessary declarations.

Also common items (eg. content container, content highlights, etc) should use the same the HTML structure, but when these items appear in different sections, pages or even templates, they should still have the flexibility to look different.

I found Mollio to be a very good reference to how a site can plan its XHTML structure and CSS declarations.