50 lovely CSS tutorials

Some very pretty stuff here. Amazing what you can do with CSS3 (or will be able to do once enough people upgrade their browsers!):

http://www.dzinepress.com/2010/03/50-excellent-tutorials-for-web-development-using-css3/

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Wow, there's some great looking stuff there.

I'm looking forward to checking some of those tutorials out.

Can you generally use some of these techniques now and have them degrade gracefully (or even less nicely) in older browsers?

Cat

--
http://web.soothed.com.au/
Web design for natural therapists

@Cat: I think it depends on the exact technique you're talking about. For example, rounded corners will obviously just turn into straight corners on older browsers, which may or may not be a problem. (BTW here's a great script that retro-fits border-radius (rounded corners) to IE and Opera: http://www.curvycorners.net/ )

OTOH, http://www.css3.info/liquid-faux-columns-with-background-size/ will look horrid in browsers that don't support it!

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks Matt,

Looks like I have got a long way to go with CSS. I can do the basics OK, but seem to have a mental block with some of the more advanced stuff. Any tips on where to start for someone wanting to improve their CSS skills?

Cat

--
http://web.soothed.com.au/
Web design for natural therapists

Good question Cat, and a tricky one to answer! I'm no expert at CSS either, but here are some suggestions on how to improve your skills:

1) Forget about IE6. It will just hurt your brain, limit your knowledge of newer CSS, and make you use all sorts of nasty hacks. If you must make a site work with IE6, get it working with FF/Safari/Chrome/IE8 first, then add IE6 hacks to an IE6-specific style sheet by using conditional comments: http://www.elated.com/articles/internet-explorer-conditional-comments/

2) Learn all the selectors thoroughly. Once you understand how to select practically any element in the markup, things get easier. See http://www.w3.org/TR/CSS2/selector.html

3) Use good reference material. http://www.alistapart.com/ has some great articles on various CSS tricks such as layouts and sprites. http://www.css3.info/ is great for learning about all the new cool stuff in CSS3. http://www.csszengarden.com/ is also good. I also reviewed a CSS book recently that does a good job of explaining CSS 2.1 in detail: http://www.elated.com/articles/book-review-getting-started-with-css/

4) Lots of practice! The more CSS sites you build, and the more you challenge yourself to implement complex designs from PSDs, the better you'll get and the more tricks you'll learn.

Hope that helps!
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks Matt, that's fabulous advice

Will let you know how I get on!

Cat

--
http://web.soothed.com.au/
Web design for natural therapists