CSS is simple, until it's not.<p>Then it's like clawing your eyes out with a rusty spork. Underwater. With your hands tied behind your back.<p>It's best learned when you have a goal in mind, as tutorials are too idealized; you're not going to learn all that much by reading yet another "holy grail layout" article, you're going to learn by getting your hands bloody and finding out how stuff <i>really</i> works in the browser.<p>My advice? Have a layout in mind; for a challenge, try and replicate something you have a mockup of in Photoshop. Take a copy of Firefox. Install Firebug. Inspect elements at other websites that have done what you're trying to do: keep in mind how the <div>s are nested and laid out, and what CSS styles are applied to those <divs>. Read lots of alistapart.com and quirksmode.org, and Google as much as you can. Try and replicate styles yourself, ideally with an editor that's going to show you your CSS changes live as-you-go (ideally by-the-character) so you can experiment and iterate rapidly. Check your stuff in IE6 to discover exactly how many man-hours have collectively been wasted coding around MS's shit. And let me reiterate: Don't be afraid to Google for answers to problems, and to learn from how other pages have solved your problems.<p>Oh, and one book you absolutely <i>must</i> read: Dan Cederholm's Bulletproof Web Design. You may or may not need to design your pages that way, but it will expand your mind as to how you can get things done.
I learned directly from <a href="http://www.w3.org/TR/REC-CSS2/" rel="nofollow">http://www.w3.org/TR/REC-CSS2/</a> and loved it. Familiarize yourself with the content, read the chapters that look interesting, and then use CSS in your projects, reading on the relevant material as you go. And then a bit of reading on the more advanced chapters and you'll be pretty expert.
CSS, the language, is relatively simple. CSS, the kung fu, is a matter of learning how tons of edge cases and tricks come together.<p>It's best to treat it like other programming languages: go find some websites that you respect the look of and ask yourself <i>how did they make that effect?</i><p>Then skim through this stuff: <a href="http://alistapart.com/topics/code/css/" rel="nofollow">http://alistapart.com/topics/code/css/</a>
I started looking at the free resources at Sitepoint with some success (see <a href="http://reference.sitepoint.com/css/css" rel="nofollow">http://reference.sitepoint.com/css/css</a>), but I haven't delved deep enough to give it a full-on recommendation. Still, it seems elaborate, and you have the benefit of switching to the HTML and the (forthcoming) Javascript references when you want to color your studies with some context.
I asked the same question on HN earlier:
<a href="http://news.ycombinator.com/item?id=73284" rel="nofollow">http://news.ycombinator.com/item?id=73284</a><p>I ended up buying the book CSS Mastery by Andy Budd and I'm quite satisfied with it ;)
Try this: CSS: The Definitive Guide, Third Edition (<a href="http://oreilly.com/catalog/9780596527334/index.html" rel="nofollow">http://oreilly.com/catalog/9780596527334/index.html</a>)<p>and this: CSS Cookbook, Second Edition
(<a href="http://oreilly.com/catalog/9780596527419/index.html" rel="nofollow">http://oreilly.com/catalog/9780596527419/index.html</a>)<p>These books are a pleasure to read and they are really cool.
If you're a total beginner, the Head First HTML is pretty good. I know some people don't like the style of these books, but for HTML & CSS, I think it worked well.<p><a href="http://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X" rel="nofollow">http://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197...</a>
Here are some links suggested by a friend/ great designer.<p><a href="http://senthil.homelinux.com/2008/06/08/six-cool-css-links/" rel="nofollow">http://senthil.homelinux.com/2008/06/08/six-cool-css-links/</a>