Free Visual CSS Reference to Study Codes by Example

The best thing about learning to code is all the free stuff online to help you. There’s tons of free videos and tutorials on every topic imaginable.

I personally find the best way to learn is to do it yourself and learn as you go. This is why references can be so helpful: you just look up whichever topic you’re confused by and study how it should work in the real world.

When it comes to learning CSS I think the CSS Reference is my favorite site.

This online resource catalogs every single CSS property dating back to the original spec and all the way up to CSS 3.x.

Note this guide is very much a tutorial in its own right. The content reads like one-part dictionary and one-part help guide.

For example have a look at the animation-delay page. This defines the property and what it does along with the values it accepts.

But you’ll notice there’s quite a few live demos on this page too. You can actually test CSS3 animations right on the page to see how the code works live. Crazy!

There’s never been any CSS reference this detailed or this useful. Or at least I’ve never found one.

You can browse properties based on topics (ex: animation, typography, flexbox) or browse the entire library of properties all at once. Either way this is a huge reference guide and it’s basically the unofficial resource for everything CSS.

One thing I will say is that the definitions of these properties are sparse. It helps if you already have some experience coding CSS, or at least some familiarity with the syntax.

But even a complete newbie can bookmark this site and come back to it as a reference. By far the most practical hands-on guide to CSS I’ve ever found.

Not to mention the whole thing is fully open sourced and downloadable from GitHub.