How to learn CSS

CSS ist the back-bone of web-applications. It's a wonderful declarative language. You should learn it, here is how:

1. Visit Zen Garden to see how beautiful CSS can be.
2. Use Firefox and get Firebug from http://getfirebug.com/
3. Visit any website and open Firebug by clicking F12.
   Learn how to inspect and tweak CSS of any website
4. Print the CSS CheatSheet 2-page PDF summary and put it next to your PC.
   
5. Forget all tutorials, web schools and whatever.
   Rely only on http://www.w3.org/TR/CSS2/ and read it.
   Learn the basic formatting models (normal, floating, ...)
   

Take home messages:

• CSS is much like LaTeX, both were designed to render text and figures
• With CSS2, you can change the semantics of ANY HTML element. Yes, you can e.g. make headlines look like bullet list items or the other way round. Your fantasy is the limit.
• CSS purists don't like tables. However, many things work only with tables. Do use tables. But use few of them and only if you need them (if you don't get things done with CSS in 5 minutes).
• Learn CSS by inspecting other cool websites with Firebug. There are e.g. ca. 10 different ways to create "rounded corners" and they are all somehow "primitive". But they work.
• Test CSS on different browsers, but ignore Internet Explorer 6, that one is just broken.
• Firebug is your CSS editor. Explore it well an learn e.g. to move values with the up/down cursor keys to perfection while the live website changes.
  

Tools:

• Free CSS Editor Plugin for Eclipse - syntax highlighting, autocomplete, outline.
  Use it only to not loose overview when you edit a lot in Firebug. Copy and paste the changed CSS from Firebug to Eclipse and use the auto-format source to make it readable. Comment your CSS well. Firebug kills all formatting and all comments, so copy-and-paste only small portions.