Awesome CSS Learning

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, CSS-in-JS or other aspects of todays CSS ecosystem.

Please read the contribution guidelines before contributing.

Contents

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

---

CSS References

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

CSS in a nutshell

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

Fundamental concepts

• 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.
• Responsive Design - Extensive information about all aspects of responsive design to make sites that look great and work well for everyone.

CSS units

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

Selectors

• Basic CSS Selectors - An introduction 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 Diner - Learn how to use CSS selectors with this fun little game.

Custom properties (aka CSS variables)

• 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

• Learn CSS Layout - Learn about CSS layout techniques in 5 chapters.
• 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.

Classic layouting

• 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.

Flexbox

• A Complete Guide to Flexbox - All you need to know about Flexbox on one page.

• Flexbox playground - Play with Flexbox examples on CodePen.