# Visual CSS Reference To Study Codes By Example For Free

**URL:** <https://onehack.st/t/visual-css-reference-to-study-codes-by-example-for-free/215760>\
**Category:** Tutorials & Methods\
**Tags:** programming, freebies, tips-tricks\
**Created:** [March 2, 2022, 12:29pm UTC](https://onehack.st/t/visual-css-reference-to-study-codes-by-example-for-free/215760 "2022-03-02T12:29:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![NoBody](https://onehack.st/user_avatar/onehack.st/nobody/32/163880_2.png) [@NoBody](https://onehack.st/u/NoBody)\
**Post date:** [March 2, 2022, 12:29pm UTC](https://onehack.st/t/visual-css-reference-to-study-codes-by-example-for-free/215760/1 "2022-03-02T12:29:25Z")

</div>

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](https://cssreference.io/) 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](https://cssreference.io/property/animation-delay/). 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!

 ![image](https://onehack.st/uploads/default/original/3X/a/e/aed2d18e5477caf49aefaf38599c529e5e95e61f.jpeg)

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](https://github.com/jgthms/css-reference).

**Happy learning!**

---

<div class="post-metadata">

**Author:** ![ailihphilia](https://onehack.st/user_avatar/onehack.st/ailihphilia/32/104172_2.png) [@ailihphilia](https://onehack.st/u/ailihphilia)\
**Post date:** [March 3, 2022, 8:39am UTC](https://onehack.st/t/visual-css-reference-to-study-codes-by-example-for-free/215760/2 "2022-03-03T08:39:28Z")

</div>

Thank you!