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.
.
131 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.
srinu
September 23rd, 2008
I Learn CSS from CSSDOG.COM, that is a good site.
Dijie
September 23rd, 2008
good sites. Thanks for this list.
588cy
dinu
September 30th, 2008
this is what I was looking for !!!!!!!!!!!! really .. just posted something about it ..
elizer
November 14th, 2008
nice post..and great list.. thank you
youness
November 17th, 2008
Thanks for this list
good sites http://www.html.net/tutorials/css/
Rene
November 29th, 2008
Great list of helpful websites, Thanks
Ralph
January 18th, 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
January 22nd, 2009
Great list, thank you!
themisfit
February 9th, 2009
Thanks for the great links. There is so much to learn with CSS and this will be a great asset.
blanov
March 16th, 2009
great. very cool. i like it
52javascript
May 6th, 2009
Great list here, these sites would be very helpful for anyone trying to master the art of CSS. Great job!
dgaert
June 29th, 2009
this is nowhere good for me or you so stay off this web site
شات
June 30th, 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
July 11th, 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
July 17th, 2009
Awesome list! i really want to learn CSS so I’ll have to check out all those sites. :)
Bhaskaran
October 20th, 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
October 26th, 2009
Very useful list. Thanks so much.
SWP
November 2nd, 2009
Thanks for the great links. There is so much to learn with CSS and this will be a great asset.
Vail
January 20th, 2010
Thanks so much for the tips. Honestly, CSS really confuses me.
Desarrollos Web
March 7th, 2010
Practice it´s 80 % of become a Master, in all topicts.
But the knowledge is very very important.
Thanks for the reference!
Leave a Comment