An awesome list limited to the best CSS learning resources

This list is mainly about CSS – the language and the modules. Not about naming conventions, architecture paradigms, frameworks, pre-processors, post-processors or other aspects of todays CSS ecosystem.

Please read the contribution guidelines before contributing.

• CSS References
• CSS in a nutshell
• Fundamental concepts
• CSS units
• Selectors
• Custom properties (aka CSS variables)
• Layout

• codrops - An extensive CSS reference offering way more content than MDN.
• Can I use - Interactive browser support tables for CSS (and HTML5).

• Introduction to CSS - This Screencast series will teach you the basics of CSS in about one hour.

• The cascade - This article explains what the cascade is and how this affects you.
• Specificity and inheritance - Understanding specificity and inheritance is important to master CSS. This article will help.
• CSS Box Model - An article explaining the foundation of layout on the web.
  • Also have a look at the detailed information about the box-sizing property.

• The Lengths of CSS - Overview covering absolute and relative units.
• Fun with Viewport Units - Imparts the basics and shows some nifty use-cases.

• Basic CSS Selectors - An introducing to the very basic CSS selectors you need to know.
• Advanced CSS Selectors - Level up your knowledge. From attribute selectors to CSS3 pseudo classes.
• CSS Dinner - Learn how to use CSS selectors with this fun little game.

• CSS Variables: Why Should You Care? - A short introduction to CSS variables.
• Locally Scoped CSS Variables: What, How, and Why - Describes the advantages of locally scoped CSS variables.
• Using CSS variables correctly - Patterns and anti-patterns for using CSS variables.
• Everything you need to know about CSS Variables - In depth article going beyond the basics of CSS Variables using real-world examples.
• Getting Reactive with CSS - Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript.

• Layout Land - Jen Simmons video series about the new CSS Layout possibilities.
• Laying Out The Future With Grid And Flexbox - Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module.

• Floats - In depth information about how to use (and clear) floats.
• Positioning Types - A closer look at a few little-known things related to the CSS positioning layout method.
• inline-block - Shows in which cases it makes sense to use the display property inline-block for layouting.

• A Complete Guide to Flexbox - All you need to know about Flexbox on one page.
• Flexbox playground - Play with Flexbox examples on CodePen.
• Flexbox Defense - A tower defense game in the browser to learn about Flexbox with fun.
• Flexbox Froggy - Learn all the basics of Flexbox with a fun game involving frogs and lily pads.
• Flexbugs - Community-curated list of flexbox issues and cross-browser workarounds for them.
• Flexbox Zombies - A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.

• A Complete Guide to Grid - All you need to know about CSS Grid Layout on one page.
• Grid by Example - Besides examples of how to use Grid this site also has additional useful learning ressources.
• Designing with Grid - Talk about the new layout possibilities CSS Grid is offering.
• Grid Garden - Lovely game where you write CSS code to grow your carrot garden.

To the extent possible under law, Michael Kühnel has waived all copyright and related or neighboring rights to this work.