Menu

20 Websites To Help You Learn and Master CSS

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 CSS Topics - screen shot.

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 - screen shot.

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 - screen shot.

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! - screen shot.

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

Eric Meyer: CSS - screen shot.

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

456 Berea Street – CSS category - screen shot.

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 */

/* Position Is Everything */ - screen shot.

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 CSS Tutorials - screen shot.

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

Learn CSS Positioning in Ten Steps - screen shot.

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 CSS/Web Standards Links - screen shot.

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 CSS Tutorial - screen shot.

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

12. css Zen Garden

css Zen Garden - screen shot.

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

CSS at MaxDesign - screen shot.

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 - screen shot.

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 - screen shot.

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

Web Design from Scratch: CSS - screen shot.

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 - screen shot.

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

CSS on Delicious - screen shot.

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 CSS Reference - screen shot.

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 - screen shot.

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.

This was published on Aug 29, 2008

63 Comments

MikeWhoBikes Aug 29 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!

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 Aug 29 2008

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

Anthony Damasco Aug 29 2008

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

Great list of CSS tutorials.

Thanks!!

Josh Thomas Aug 29 2008

What about Smashing Magazine?

Josh Thomas Aug 29 2008

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

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

I’m a big fan of css play:

http://cssplay.co.uk

It has some good demos and tricks.

Furious Photographers Aug 29 2008

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

MyDesign.com.ar Aug 29 2008

good sites. In spanish you have one csscreme.com

Shirley Aug 29 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.

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

Television Spy Aug 29 2008

CSS ZenGarden is my hero.

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 Aug 29 2008

Great List. Thanks!

@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.

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

Max | Design Shard Aug 29 2008

some good resources, for getting some good tips.

adelaide web design Aug 29 2008

This is great thanks

selvagk Aug 30 2008

Awesome list..

Ben Hayman Aug 30 2008

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

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

Tech Geek Aug 30 2008

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

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 Aug 30 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 Aug 31 2008

great sites.thanks for the list Jacob

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

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

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

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 Sep 04 2008

I love CSS. Thanks.

JONxBLAZE Sep 04 2008

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

TKS….

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.

I Learn CSS from CSSDOG.COM, that is a good site.

good sites. Thanks for this list.

588cy

this is what I was looking for !!!!!!!!!!!! really .. just posted something about it ..

nice post..and great list.. thank you

youness Nov 17 2008

Thanks for this list
good sites http://www.html.net/tutorials/css/

Great list of helpful websites, Thanks

Thanks a lot for this list of great websites to learn how to code CSS. I love CSS is the most great way to handle the content and some form too on a website. Thanks for sharing your list. Best from Ralph (www.deprowebs.com)

Great list, thank you!

themisfit Feb 09 2009

Thanks for the great links. There is so much to learn with CSS and this will be a great asset.

great. very cool. i like it

52javascript May 06 2009

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

this is nowhere good for me or you so stay off this web site

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?

BrockSamson Jul 11 2009

Demystify all of this. Just read the Recommendation from the W3C – http://www.w3.org
Encounter difficulty? Search http://www.Exalead.com/search/ (where the tedium of refining search-results is eased [re: right-panel])

(NOTE: The w3c is NOT to be confused with w3schools, which is in large part a republishing of w3c standards. one wonders, for so many weak abbreviations, which is being referenced by whom. [e.g. “ I learned my CSS from W3 ”])

Awesome list! i really want to learn CSS so I’ll have to check out all those sites. :)

Bhaskaran Oct 20 2009

Hi Jacob, I am learning CSS. This list is very useful for me at this stage.

While learning CSS i am mainly getting stuck with 2 things
1st – what is the best type of layout i need to use make websites (Eg: fixed, fluid, elastic or a hybrid layout)What type of layouts do major companies use like IBM,Oracle and SAP?

2nd – Which website out of this 20 websites talk more about making websites look the same way across all the browsers?

Since i am learning your answer will help me to go in the right direction.

Thanks and regards

Bala

Michael Frey Oct 26 2009

Very useful list. Thanks so much.

Thanks for the great links. There is so much to learn with CSS and this will be a great asset.

Thanks so much for the tips. Honestly, CSS really confuses me.

Desarrollos Web Mar 07 2010

Practice it´s 80 % of become a Master, in all topicts.

But the knowledge is very very important.

Thanks for the reference!

this is a good list. i am a beginner at css and i think these sites will help me do my work.

I second the purchase of CSS Mastery. An excellent book for the intermediateadvanced developer.

Thanks for the reference

super list

sanajy kumar sinha Mar 17 2011

i wanna mastering in css please help us

Rekha Ram Apr 02 2011

superb list..
.
.
will be helping me a lot!!!

WOW……. Great post!!!!

Wow, i never heard those list before where i can learn css for free. These are great list and i think it’s worth checking out. The only site i’ve heard and learnt from is w3schools where you can learn and practice online. That’s what i like from w3schools. Thanks for giving us so many choices.

This comment section is closed. Please contact us if you have important new information about this post.

Partners