20 Websites To Help You Learn and Master CSS

August 29th, 2008 by Jacob Gube | 116 Comments | Stumble It! Delicious

CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand.

This article features 20 excellent websites to help you "grok" CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS.

1. A List Apart CSS Topics

A List Apart, the premier site to read articles about web design and best practices, has a collection of articles on the topic of CSS dating back to 1999. Most articles are geared towards intermediate to advanced developers who put a strong emphasize on standards-compliant designs.

2. CSS Help Pile

CSS Help Pile is an aggregate of CSS resources, tips, and how-to’s. The site is well-organized and a wonderful resource for any level of expertise. There’s a category for beginners, browser bugs, and short reviews of CSS books.

3. CSS Basics

CSS Basics is formatted like a book with 18 chapters dedicated to educating readers about fundamental CSS concepts. The writing is clear and succinct - making it a great resource for those just starting out. All 18 chapters can be printed or downloaded in PDF format.

4. Holy CSS Zeldman!

Holy CSS Zeldman (not a site by Jeffrey Zeldman) is a useful collection of resources that link to standards-based CSS tutorials, tools, and layouts.

5. Eric Meyer: CSS

Here’s a collection of works by Eric Meyer (acclaimed web professional and author). Some resources you’ll find on this page are css/edge (Eric Meyers experiments on CSS) and CSS reference.

6. 456 Berea Street – CSS category

Roger Johansson’s 456 Berea Street has over 300 posts under the CSS category. Some posts talk choosing an image replacement method while others teach you CSS techniques.

7. /* Position Is Everything */

Those just getting their hands around authoring CSS code will quickly realize that a significant chunk of time (and frustration) stems from getting rid of browser bugs. Position Is Everything discusses known browser bugs and shares CSS methods that work across browsers. Here, you can read about the one true layout or learn what happens when you nest absolutely-positioned div’s.

8. HTML Dog CSS Tutorials

HTML Dog is a tutorial website dedicated to teaching XHTML and CSS best practices. There’s three CSS tutorial sections: Beginner, Intermediate, and Advanced.

9. Learn CSS Positioning in Ten Steps

Positioning elements using CSS can be a tricky concept at first. If you’re having a hard time understanding the fundamentals of CSS positioning, check out this 10-step tutorial to get you positioning stuff in no time!

10. Andy Budd CSS/Web Standards Links

Andy Budd (directory of Clearleft, CSS guru, and author of one of my favorite books – CSS Mastery) has a set of CSS/web standards links to help you find reliable, useful information about CSS.

11. W3CSchools CSS Tutorial

W3CSchools has a CSS section that covers the very basics of CSS up to more advanced topics.

12. css Zen Garden

css Zen Garden is a showcase of the things you can do CSS. Most importantly, it highlights the concept of separating content from presentation. Using the same HTML file, designers submit external stylesheets to style the HTML file. I suggest using the Web Developer Tool to inspect how the layouts work and what styles affect certain elements of the page.

13. CSS at MaxDesign

At MaxDesign, you can find Russ Weakley’s brilliant set of CSS-related tutorials. Some things to expect here are: Listmatic – which shows you a variety of ways you can use CSS to style lists, and Floatutorial – which goes through the fundamentals of floating elements.

14. CSSeasy.com

CSSEasy.com’s slogan is "learn CSS the modern way". The site promotes learning by experience, with the idea that if you inspect the source code and see how things fit together as a whole, you’ll gain a better understanding of CSS. The Web Developer Tool will also come in handy on this website.

15. CSS-Discuss

CSS-Discuss is a community of CSS enthusiasts. The CSS-Discuss Wiki is a comprehensive collection of real-world usage of CSS.

16. Web Design from Scratch: CSS

Ben Hunt’s Web Design from Scratch has an excellent section on CSS that covers basic concepts about CSS. I highly recommend beginners start off with Introduction to CSS, a quick but very informative starting point to getting your hands dirty with CSS.

17.CSS-Tricks

CSS-Tricks is a blog dedicated to the topic of CSS. You’ll find helpful posts such as what CSS Sprites are (in a nut shell), techniques for image replacements, and even screencasts on topics like conditional stylesheets.

18.CSS on Delicious

The CSS tag on Delicious is a great way to find popular links that relate to CSS. It allows you to see what people are currently reading.

19. SitePoint CSS Reference

SitePoint has a CSS reference section that discusses introductory level CSS topics. You can get a crash course on general CSS syntax and nomenclature onto slightly more advanced topics such as CSS hacks and filters.

20. CSSDog

CSSDog has a section for both beginners and more advanced developers. Aside from CSS lessons, their CSS Reference section - which lists quick guides and color references - are very helpful.

Missed your favorite?

Do you have a favorite CSS website not on the list? Talk about it in the comments.

If you enjoyed this article, consider subscribing to the Six Revisions RSS feed!

116 Comments

MikeWhoBikes

August 29th, 2008

Wow, this is a terrific post. I’ll have to check out a few of these to brush up on my CSS; it could probably use it. Thanks!

Cole

August 29th, 2008

One I would definitely add to this list is Quirks Mode [http://www.quirksmode.org/] which really helps nail some of those browser bugs

Permana Jayanta

August 29th, 2008

I Learn CSS from W3Schools, that is a good site …
Btw, what a useful post … I’m goint to delicious it ..

Anthony Damasco

August 29th, 2008

W3Schools was my favorite, but the newer websites seem easier and prettier

frank

August 29th, 2008

Great list of CSS tutorials.

Thanks!!

Josh Thomas

August 29th, 2008

What about Smashing Magazine?

Josh Thomas

August 29th, 2008

What about Smashing Magazine? http://www.smashingmagazine.com

jayhan

August 29th, 2008

Cool list! And yeah, I also learn css at W3Schools and NETTUTS

Mike

August 29th, 2008

I’m a big fan of css play:

http://cssplay.co.uk

It has some good demos and tricks.

Furious Photographers

August 29th, 2008

I learned my CSS from W3 and built my wedding photography website! Nice post ;D

MyDesign.com.ar

August 29th, 2008

good sites. In spanish you have one csscreme.com

Shirley

August 29th, 2008

I’d say that ‘A List Apart’ is probably the best website on there. They are cutting edge and have very elegant solutions to some common problems and cross-compatibility issues. Even better, for the beginner CSS’er, the tutorials are very simple.

Shaun

August 29th, 2008

Great list! CSS offers so much opportunity. The more you know the better you get. Thanks!

Television Spy

August 29th, 2008

CSS ZenGarden is my hero.

Sheena

August 29th, 2008

Wonderful…CSS can lead to so much creativity. One resource I’d definitely add is the web design dashboard - http://www.agencytool.com/dashboard/ - it’s got a ton of stuff on CSS and also other random web design resources!

bangbouh

August 29th, 2008

Great List. Thanks!

Greg

August 29th, 2008

@Josh Thomas - While Smashing Magazine is indeed an awesome resource, they tend focus on a variety of things from print to photoshop tut’s to css. The sites listed here are primarily for teaching/discussing css.

Traxy

August 29th, 2008

Thanks. I want to know CSS, because it’s necessity for web developement.

Max | Design Shard

August 29th, 2008

some good resources, for getting some good tips.

adelaide web design

August 29th, 2008

This is great thanks

selvagk

August 30th, 2008

Awesome list..

Ben Hayman

August 30th, 2008

This is a very useful list, I’m sure I’ll be able to pick up a few tricks from these!

Jason

August 30th, 2008

Devguru.com has a good CSS2 reference. http://www.devguru.com/technologies/css2/index.asp.

Tech Geek

August 30th, 2008

I do need to brush up on my CSS, I think I could start now with this list. Thanks.

mark

August 30th, 2008

i agree with Mike above. Stu Nicholls’ site is really ahead in the css game. Check it out for more advanced css tricks.

http://www.cssplay.co.uk/index

Jacob Gube

August 30th, 2008

Thanks for dropping your comments, everyone - keep the suggestions coming!

@Cole: Quirksmode is awesome not only for standards-based CSS, but also for JavaScript stuff - thanks for sharing it.

@Mike and @Mark: CSSPlay is definitely a great site to explore and learn CSS - I even credit it as one of the sites that made me a better developer.

@Jason: Nice find!

@Josh Thomas: Exactly what @Greg said. Smashing Magazine is a great resource for designers, but they don’t specifically focus on CSS like the websites featured above.

NaldzGraphics

August 31st, 2008

great sites.thanks for the list Jacob

Paul M

August 31st, 2008

I like csshowto new, but getting there :) http://csshowto.com

Deepak

September 1st, 2008

excellent post..really useful..thanks !!!

Micah

September 2nd, 2008

Thanks for this list. I’m sure it will come in handy at certain points.

Hy

September 4th, 2008

CSS DOG? Really? There is nothing to this site except CSS and the CSS information on the site doesn’t even follow CSS standards. HuH?

site bekçisi

September 4th, 2008

I love CSS. Thanks.

JONxBLAZE

September 4th, 2008

Great list here, these sites would be very helpful for anyone trying to master the art of CSS. Great job!

D@CN

September 17th, 2008

TKS….

Nicole

September 21st, 2008

I am a HS Web Design teacher in a Buffalo NY suburb. I am looking to go beyond the basics and develop a website has a CSS layout and style etc. Thanks I hope I find some tutorials that have you actually follow and create something rather than give you general steps. Thanks for the great post.