40 BEST FREE CSS LEARNING RESOURCES

[Login to see the link]
An extensive CSS reference offering way more content than MDN
[Login to see the link]
Interactive browser support tables for CSS (and HTML5).

[Login to see the link]
This Screencast series will teach you the basics of CSS in about one hour.

[Login to see the link]
This article explains what the cascade is and how this affects you.
[Login to see the link]
Understanding specificity and inheritance is important to master CSS. This article will help.
[Login to see the link]
An article explaining the foundation of layout on the web.

[Login to see the link]
An introducing to the very basic CSS selectors you need to know.
[Login to see the link]
Level up your knowledge. From attribute selectors to CSS3 pseudo classes.
[Login to see the link]
Learn how to use CSS selectors with this fun little game.

[Login to see the link]
A short introduction to CSS variables.
[Login to see the link]
Describes the advantages of locally scoped CSS variables.
[Login to see the link]
Patterns and anti-patterns for using CSS variables.
[Login to see the link]
In depth article going beyond the basics of CSS Variables using real-world examples.
[Login to see the link]
Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript.

[Login to see the link]
Learn about CSS layout techniques in 5 chapters.
[Login to see the link]
Jen Simmons video series about the new CSS Layout possibilities.
[Login to see the link]
Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module.

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

[Login to see the link]
All you need to know about Flexbox on one page.
[Login to see the link]
Play with Flexbox examples on CodePen.
[Login to see the link]
A tower defense game in the browser to learn about Flexbox with fun.
[Login to see the link]
Learn all the basics of Flexbox with a fun game involving frogs and lily pads.
[Login to see the link]
Community-curated list of flexbox issues and cross-browser workarounds for them.
[Login to see the link]
A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.
[Login to see the link]
A simple, free 20 video course that will help you master CSS Flexbox!

[Login to see the link]
All you need to know about CSS Grid Layout on one page.
[Login to see the link]
Besides examples of how to use Grid this site also has additional useful learning resources.
[Login to see the link]
Talk about the new layout possibilities CSS Grid is offering.
[Login to see the link]
Lovely game where you write CSS code to grow your carrot garden.
[Login to see the link]
Community-curated list of Grid interop issues and workarounds for them.
[Login to see the link]
Learn CSS grid layout by mastering an adventure game.

[Login to see the link]
An introduction to to CSS transitions and CSS (2D) transforms.
[Login to see the link]
Also addressing advanced topics from chaining and events to hardware acceleration and animation functions.
[Login to see the link]
Multi page tutorial with examples like card flip and carousel effects.
[Login to see the link]
Imparts the concepts of CSS animations with keyframes.
[Login to see the link]
Nice little page demonstrating which CSS properties are animatable.