Recent Posts

Search

Categories

Archives

4 Levels of CSS knowledge

11th Dec 2008, Thu

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.

Posted in Web Design |


5 Responses to “4 Levels of CSS knowledge”

  1. Chufang Says:
    December 27th, 2008 at 4:16 am

    I cannot believe it. You blogged this when we were singing songs on Youtube. -_- Btw, you should upgrade to latest version of WP. The back-end layout will blow you away.

  2. nickpan Says:
    December 27th, 2008 at 2:31 pm

    Ya i know about WP 2.7 and “we” are already using it. :)

  3. MK Says:
    December 28th, 2008 at 1:51 pm

    hey…your site appears funnily if opened in IE. is that some funny code you added or something?

  4. draco Says:
    January 1st, 2009 at 6:11 am

    What’s next after the 4th?

  5. nickpan Says:
    January 2nd, 2009 at 3:11 am

    @draco that would be styling a network of sites. :) see http://advertising.gawker.com

Leave a Reply