40 Best Free CSS Learning Resources

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. It is also an easy programming language to learn at a basic level. The CSS technology was designed to be accessible so anyone could create their own styled web pages on the internet. A lot of the syntax you see in CSS will be very familiar when you learn the basic concepts of HTML.

HTML and CSS aren’t considered “programming” languages though, simply because they only determine the structure and the style of the webpage you’re building. They don’t contain any instructions like the other front-end languages. Web design is something which is very interesting and this is something which can also be very challenging at times. If you are one of the people who love to design using CSS, there are actually thousands of learning resources which you can try out. This post will cover 40 of the best CSS learning resources, covering fundamental concepts, units, selectors, custom properties, animation and many more.

CSS References

1. Codrops
   An extensive CSS reference offering way more content than MDN
2. Can I use
   Interactive browser support tables for CSS (and HTML5).

CSS in a Nutshell

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

Fundamental concepts

1. The cascade
   This article explains what the cascade is and how this affects you.
2. Specificity and inheritance
   Understanding specificity and inheritance is important to master CSS. This article will help.
3. CSS Box Model
   An article explaining the foundation of layout on the web.

CSS units

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

Selectors

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

Custom properties (aka CSS variables)

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

Layout

1. Learn CSS Layout
   Learn about CSS layout techniques in 5 chapters.
2. Layout Land
   Jen Simmons video series about the new CSS Layout possibilities.
3. Laying Out The Future With Grid And Flexbox
   Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module.