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.

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!

Sara Soueidan

Sara is a Lebanese freelance front-end web developer and speaker, specializing in semantic markup, CSS, SVG, and progressively enhanced, responsive design, with a strong focus on accessibility and performance. She is the author of our CSS Reference and has co-authored the Smashing Book 5, a book that covers time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. Sara also runs in-house workshops about SVG and about building accessible UI patterns. Her client list includes Netflix, The Royal Schiphol Group @ Amsterdam Airport, TELUS Digital, and more. Learn more about some of her work or hire her.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 103

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

  2. 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…

    • 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! 🙂

  3. wow guys!!! this is incredible!!! keep this up, i always come back to tympanus for my css3 needs!!! 🙂

  4. 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!

  5. 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!!!!

    • 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

  6. Thanks for taking the time to put this together. I love what you guys are doing at Codrops and this is yet another example of why I visit you guys so frequently.

    Keep up the great work!

    Best

    Jude

    P.S. Would love to see a modern take on table design in the playground!

  7. I’m so excited for all the new endeavors that Codrops is taking. I’ve been referring to Codrops for inspiration and help with HTML/CSS for years. It has been one of my reliable sources for web inspiration! Keep up the great work.

  8. A fantastic reference tool, beautiful and legible.
    I will be using it frequently: there’s so many syntaxes I keep forgetting how to spell but I’m planning to use more often.
    Like translate() function, repeating-linear-gradient for stripy backgrounds, ::first-letter … ).
    And you even added detailed browser support! Amazing work.

  9. Thanks so much for the time and effort you put into this. I’m sure it will serve as a prime resource for a long time, as your work is typically very high-quality. Thanks for creating and sharing this reference.

  10. Codrops is definitely one of the most inspirational places for designers on the web. Thank you for all you post! Great work!

  11. Really like it, great job.

    One little item of feedback though, the browser support table is way to far down. I have to look/search for it, but it should be clear from the top, IMO.

  12. Really like it, great job.
    One little item of feedback though, the browser support table is way to far down. I have to look/search for it, but it should be clear from the top, IMO.

  13. Only not to use this overused phrase “awesome”: this is more than absolutely and extremely fabulous! So much knowledge and well written guides – about EVERY. SINGLE. PROPERTY.
    I’m gonna freak out. ..no for real: i am just freaking out! Like i’m about to print everything out and name it “The Web Bible”

    Well done. Very nice.
    Now go and have a ton of cookies. =)

  14. Just took a peek at some of the new entries, they are AWESOME!!!!
    Thanks so much for providing such a great place for learning CSS!!

  15. Hello Sara,

    Your works are really so inspiring and helpful. I just wanted to ask you if could please kindly make a Web Accessibility Initiatives – Accessible Rich Internet Application (WAI-ARIA) REFERENCE guide just like the CSS Reference and show how and where to use it. I believe The World will appreciate it. We the beginner level Web Developers needs to learn this ASAP for better and accessible web experiences for all. Thank You so much for all of your contribution for this Industry. Take Care and lot’s of LOVE for You.

  16. here to use it. I believe The World will appreciate it. We the beginner level Web Developers needs to learn this ASAP for better and accessible web experiences for all. Thank You so much for all of your contribution for this Industry. Take Care and lot’s of LOVE for You.