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, 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.
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!
Cole Aug 29 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 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
frank Aug 29 2008
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
jayhan Aug 29 2008
Cool list! And yeah, I also learn css at W3Schools and NETTUTS
Mike Aug 29 2008
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.
Shaun Aug 29 2008
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.
Sheena Aug 29 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 Aug 29 2008
Great List. Thanks!
Greg Aug 29 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 Aug 29 2008
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!
Jason Aug 30 2008
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.
mark Aug 30 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 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
Paul M Aug 31 2008
I like csshowto new, but getting there :) http://csshowto.com
Deepak Sep 01 2008
excellent post..really useful..thanks !!!
Micah Sep 02 2008
Thanks for this list. I’m sure it will come in handy at certain points.
Hy Sep 04 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 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!
D@CN Sep 17 2008
TKS….
Nicole Sep 21 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.
srinu Sep 23 2008
I Learn CSS from CSSDOG.COM, that is a good site.
Dijie Sep 23 2008
good sites. Thanks for this list.
588cy
dinu Sep 30 2008
this is what I was looking for !!!!!!!!!!!! really .. just posted something about it ..
elizer Nov 14 2008
nice post..and great list.. thank you
youness Nov 17 2008
Thanks for this list
good sites http://www.html.net/tutorials/css/
Rene Nov 29 2008
Great list of helpful websites, Thanks
Ralph Jan 18 2009
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)
Elena Jan 22 2009
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.
blanov Mar 16 2009
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!
dgaert Jun 29 2009
this is nowhere good for me or you so stay off this web site
شات Jun 30 2009
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 ”])
Swany Jul 17 2009
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.
SWP Nov 02 2009
Thanks for the great links. There is so much to learn with CSS and this will be a great asset.
Vail Jan 20 2010
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!
Faiz May 26 2010
this is a good list. i am a beginner at css and i think these sites will help me do my work.
vzw Jul 09 2010
I second the purchase of CSS Mastery. An excellent book for the intermediateadvanced developer.
2011 Jul 15 2010
Thanks for the reference
kira Feb 16 2011
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!!!
Ed May 04 2011
WOW……. Great post!!!!
Dian Aug 30 2011
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.