20 Websites To Help You Learn and Master CSS

Aug 29 2008 by Jacob Gube | 63 Comments

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.

63 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?

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!

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!

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!

Faiz

May 26th, 2010

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

vzw

July 9th, 2010

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

2011

July 15th, 2010

Thanks for the reference

kira

February 16th, 2011

super list

sanajy kumar sinha

March 17th, 2011

i wanna mastering in css please help us

Rekha Ram

April 2nd, 2011

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

Ed

May 4th, 2011

WOW……. Great post!!!!

Dian

August 30th, 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.

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify