Introducing the Codrops CSS Reference

We've released a new section on Codrops: the CSS Reference. Discover more about it and what features we've added to make learning CSS more easy and practical.

cssrefmain

Codrops is one of the most inspirational places on the internet. Yes, I am biased, but I am sure you can agree that that’s true.

If you’re looking for inspiration, the many, many creative resources you can find here are sure to spark an idea or two in your head. That’s one of the things I adore about this website—Manoela and Pedro never fail to impress us with what they have to offer.

If you’re looking to learn about how to use a CSS property, you will find a lot to learn by digging into the source code for the resources you get here. But what if you want to learn more about a property’s basics: property definition, different possible values and what each value means and does, etc.? Wouldn’t it be nice if you were able to find everything you were looking for right here, too?

A little over a year ago, we thought that it would be fantastic if Codrops had some kind of section where you can read and learn all about a CSS property, therefore turning Codrops into a perfect destination for anyone looking for inspiration and wanting to learn about the CSS behind it. Manoela approached me with the idea, and only a few days later, I started writing.

So, over the course of (slightly less than) a year, we’ve created a new department for Codrops: the CSS Reference. And we are beyond thrilled to finally share it with you.

Like any knowledge base, this reference is a work in progress and we strive to improve it and make it better. If you have any suggestions for improvements or see an error, please open an issue on this GitHub repo.

The Reference

The Codrops CSS Reference is an archive containing a list of entries categorized by type: CSS property, CSS function, CSS data type, CSS at-rule and CSS pseudo-classes/selectors/elements. Each entry is an article defining and explaining a CSS property, function, data type, at-rule or pseudo-class/selector/element.

cssref_archive

In addition to these five categories, one more category exists: CSS concept. An entry in the CSS Concept category is a complete guide to a specific CSS concept or feature.

CSS concept entries serve as a ‘global’ entry for a group of related properties. For example, Flexbox and Counters are two concepts that have their own entries. Each entry explains what the concept means, what it does, and includes a definition and usage examples of its properties.

So, what does a CSS entry look like?

Structure of a CSS Entry

cssref_entry

Each entry has a header that states what category this entry belongs to, and a live search module. We’ll talk about the live search feature in a following section.

Each CSS entry is also made up of several sections, the main ones are: Description, Official Syntax, Values, Examples, Live Demo, Browser Support, Further Reading and Related Entries. Every section may or may not have subsections.

The description section is where you learn what the CSS property/function/selector/etc. does. It’s basically where the definition and further explanation goes.

After the definition, you get an overview of the official syntax, initial value, what element(s) the CSS feature applies to, and whether or not its values are animatable. Some category types do not require this section, so it may or may not be there depending on what feature you are reading about.

Then each value is defined and described in the Values section. Again, if a CSS feature does not have a set of values (for example, an at-rule), this section is omitted.

The Examples section is where you will see examples of the feature in use—they are mainly snippets with or without screenshots of the result.

The Live Demo section will contain one or multiple live demos. The demos are sometimes live demos of the snippets in the Examples section, and sometimes they are that along with additional examples. Depending on browser support, the live demos might be accompanied with screenshots showing how the example should look like.

Note that many entries include several live demos, some of which are embedded within the description section.

Make sure you check the Browser Support section to determine whether or not the browser you are using supports the feature you are reading about.

Because there are many great reading resources about different CSS features and topics, the Further Reading section includes links to some good resources that are worth reading, along with a link to the specification(s) where the CSS feature at hand is defined.

Codrops Playground

While I wrote the entries, Manoela and Pedro worked on one of the best features of the reference: the playground.

The live demos you will see in the entries are all demos you can edit and play with yourself—and we strongly encourage you in the entries to do so, to get a better feel of how a certain feature works and what the different values do. Note that the playground is still in alpha stage and a lot of features are yet to come. Feel free to send any bug reports, suggestions or comments to playground ‘at’ codrops.com.

cssref_playground

Live Search

For each entry, you get a live search module that you can also find in the Codrops homepage, right below the featured post, to the left.

cssref_liveMainpage

The live search, as the name suggests, will give you a list of all CSS entries that match your search string. So if you search for a specific string (or even a letter), the search module will show all the entries that have that string in the title as a drop-down. This is particularly useful for getting related properties as you search for a specific property (for example: border, border-top, border-bottom, border-right, etc.).

Browser Support

Whenever available, you’ll see a CanIUse.com browser compatibility table embedded in the Browser Support section, so the compatibility table will always be up-to-date.

For the entries that don’t have a CanIUse support table, we wrote the browser support information by hand. The browser support for the majority of features is well-known and tested. Support for other features may or may not change in the future, so if you notice any outdated compatibility information, please do let us know, and we’ll update the entry accordingly.

Moving Forward

There are a few missing properties that have little or no current browser support, or whose specifications are unstable and still in flux. Our hope is to add the entries for those properties some time in the future when—hopefully—browser support gets better and specifications are stabilized.

We also all know that, in our field, something new emerges every day, so our hope is to continue growing and extending the reference, adding any additional properties and features to it with time. Even the current entries will get more improvements slowly with time.

We set milestones, and the first one was to deliver you a great reference to start with, and we’ll be working on gradually and continuously improving it in the future.

Your Feedback

Of course, your opinion and input is important to us. After all, we made this reference for you, so we want to make sure you find everything you need in it.

As such, we will be gathering your input and suggestions in a Github repository dedicated for collecting your issues and suggestions for the reference.

Found a bug? Found a piece of information that needs to be updated? Typos? Got a suggestion to improve the reference? Want us to add a concept entry for a specific CSS concept? Feel free to open an issue on Github. I will personally be looking into the issues frequently and answering your questions and making edits and updates as needed as much and as soon as possible. You can also tweet at me on Twitter if you’ve got a quick note about an entry or a request.

Final Words

We put our heart into the reference, hoping to have provided you with a very useful source of learning. I hope that you learn from the reference as much as I have learned in the process of writing it. :)

And we also hope that you like the subtle makeover Codrops got with this release, too!

Thank you very much for reading, and don’t forget to go check the reference out!

Previous:
Next:

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 103

Comments are closed.
  1. 5

    Thanks much for all the hard work…the reference has great detail and is already very helpful.

  2. 7

    Well done, it looking good. One nitpick: The pseudo class section contains pseudo elements as well. Should they be in a separate section?

  3. 9

    Thank you very much everyone for your support! It is highly appreciated! :)

    Cheers!

  4. 10

    Great resource…BUT I have to admit, the selectively blurred images in the article are quite odd. I kept thinking that I was looking at a progressive JPG that was still waiting to fully render. I refreshed the browser about 3x before realizing that they were actually created that way intentionally. Then, on top of it, the cognitive load was exhaustive. My mind kept trying to “focus” in on the blurred areas.

    I know you want to provide context for the area you are actually highlighting, but why not just tone the saturation down, or increase the transparency in the sections you don’t want to highlight? …or anything that’s a little less confusing than a blur.

  5. 11

    One of the best tutorial with working examples and sources plus new trends and upcoming techniques whatelse i should thanks for all your great support to designers all around the world…

  6. 12

    Congratulations and thanks to Sara for creating such a brilliant, comprehensive CSS resource. I’m sure this will become ‘the’ place to come to for many learning and refreshing their knowledge on all things CSS. Another reason to love coming to Codrops..

  7. 14

    This is awesome. I was looking for something like this after seeing Mozilla try to improve W3Schools

  8. 15

    Thanks guys for awesome work… just one suggestion… since this is a CSS Reference, would be nice to see some more info related to specific rule… for example…

    There is the @document rule, since when this is it available? CSS 2, CSS 2.1 or CSS3? When it was approved and who’s the author or authors… I believe those infos would make the reference much more complete…

    But anyway, it is just a suggestion for improvement and does not affect the great quality of this work…

    Keep up with the good work…

    • 16

      Hey Paulo,

      Thank you for your comment. :)

      The aim of the reference is to act as a collection of informal tutorials for the CSS features without going into the dry details of the history that might be irrelevant to its current use. For example, who the author of a specification is has no effect on how the property can or will be used.

      The information you are referring to can be found in the specification for each feature—a link to the specification is included for every entry. Feel free to have a look at the spec for any additional technical details like those.

      Cheers! :)

  9. 18

    wow guys!!! this is incredible!!! keep this up, i always come back to tympanus for my css3 needs!!! :)

  10. 21

    You are so awesome! Thank you for you work and to let me explore the possibilities of Webdesign each time I visit this website. ;)

    Keep rocking!

  11. 23

    Very Cool! I want to say that I’ve been a follower for years and Codrops is the innovation authority when it comes to interaction and thinking outside the box. I do have a couple of suggestions which maybe you guys thought of already.

    1. The CSS reference search module should also be within the reference for quick access (Maybe somewhere sticky on the page?). It might take the user some time to find exactly what they’re looking for if they have to). To take it a step further as you search for the word it filters through all of them (e.g. http://sunnywalker.github.io/jQuery.FilterTable/filtertable-striping.html) on the page which leads me to:

    2. A filtering system that can quickly filter by the category you select. (e.g. Mix it up).

    3. The ability to have the sections collapsible. Property for example is crazy long and might get bigger over the years.

    4. This one is more of a nice to have for those that are applicable. A tooltip rollover so that someone who doesn’t know what property is can quickly glance and see what it is.

    On a side note talk about all the SEO juice from all these pages!!!! LOL.

    In short, you guys rock!!!!

    • 24

      Hi Jose!
      Thanks a lot for your feedback and your kind words! Those are really great suggestions and we’ll definitely keep them in mind (the search is already on our improvements list). Love the tooltip idea :)
      Thanks again! Cheers, ML

Comments are closed.