This brilliant Firefox extension is how I learned CSS. Click the "inspect" button, then click any page element, and it'll show you all the CSS rules being applied to that element. It'll also highlight the margin+padding so you can wrap your head around the box model.

Best of all, you can change CSS properties on the fly. Naturally, the best way to learn is to hack up someone else's CSS, so go to a site you like the looks of, and play with the styling.

Soon, you'll be thinking to yourself "man, this isn't complicated at all!"

And then you will open your page in IE 6.

And then you will punch a hole in the wall.

Any reasons why Firebug is better?

WD seems to do the same things and more.

The interface is far more usable. Also, all WD can do with javascript is turn it on and off; Firebug has a full-fledged javascript debugger. (It's how I learned JS, in addition to CSS!) The DOM inspection tools are amazing.

Pretty much the only things I still use WD for are resizing the browser window and checking if I'm in quirks mode. But if breaking the page by adding a label to every div is a key feature for you, then maybe you should stick with WD. =)

UI design is really more of a set of beliefs than coding.

Start by reading Defensive Web Design for the Web by 37Signals guys.

Jakob Nielsen's useit.com alertbox articles are a great place to start too-- http://www.useit.com/alertbox/ Back in high school I printed all his useit.com articles at the library printer and compiled it neatly in a binder:)

Also checkout Jakob Nielsen's Homepage Usability: 50 Websites Deconstructed.

http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/078972...

I wrote a cursory article about CSS techniques on Particletree.

An Overview of Current CSS Layout Techniques http://particletree.com/features/an-overview-of-current-css-...

It's from 2005, but I think it's a good start for getting your head around the fundamentals. And honestly, while Firebug is a great tool for debugging CSS issues, it won't help you introduce to what's going on.

In the end, there's no crash course into CSS/UI design. It's an investment and even after you get a handle on executing good CSS, it won't necessarily help you create fantastic UIs. Remember, one doesn't always follow the other.

UI design on the other hand is something completely different (although you need to know CSS/HTML and javascript to do it). read the online book designinginterfaces.com, the 37Signals blog, try to change the structure and layout of a blog template.

you will find it hard and the first few tries won't be pleasant to see, but if you keep doing it for a few months, then you will be actually be able to do UI design.

Then turn that into HTML/CSS. I find WebKit's CSS compliance to be better than anything else out there, but Gecko browsers are pretty good too, so use one of those two engines. You can solve most bugs with one or two Google searches. Within a week or two, you'll know 90% of what you need to, and it'll take you another couple months to learn the obscure stuff.

Just like with code or any other activity, it is great to try to mimic giants.

Also, two notes.

One. Don't know how about others but I've found myself rather unable to learn conceptually new things on deadlines or working on real projects. So, at least, don't feel bad if you won't deliver good stuff.

Two. There's a lot of "layers" in the UI: information architecture, usability, CSS, graphics, and perhaps some other I forgot to mention.

http://www.w3schools.com/css/default.asp

http://www.html.net/tutorials/css/

and then move to these two books:

http://www.zeldman.com/dwws/

http://www.simplebits.com/publications/bulletproof/

And you should know more than web designers that charge a ton of money to develop table-based sites.

You'll also want access to all the major browsers out there -- which means virtual machines or multiple boxes for OS-specific browsers. Heck, you should even try out non-OS specific browsers on different OSes. I once had this bug in which my page rendered differently between Firefox / Windows and Firefox / OS X. They both had the same version number, and I am still baffled to this day.

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

http://code.google.com/p/blueprintcss/

I used it on one project. Whilst it was quick and easy to get the layout done I do agree with you on it been heavy.

One thing that I did get from it was exposure to some decent CSS. I'm confident that my future projects will benefit from having used and learned from their techniques.

I'll certainly use it again.

"CSS Mastery" by Andy Budd

You will be a ninja thereafter.

h1 { color: red }

or whatever, try CSSEdit for the Mac. It's really good for rapidly understanding what you can do with CSS - it's pretty much the OmniGraffle of CSS editing, if that makes any sense to you.

Highly recommended.

Definitely should be your first port of call.

Just dive in and start coding, CSS isn't really all that hard.

I found it really useful/fun to just copy another site (e.g. Facebook or Digg) to get a hang of how things work. If you get stuck you can always take a look at their CSS using Firebug or by opening up their stylesheet in the browser.