CSS3 Cheat Sheet (PDF)


Just last week we released an extensive printable HTML 5 Cheat Sheet1 that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card.

So we asked our friend Chris Hanscom from Veign.com2 (who created the HTML 5 cheat sheet) to create a quick reference card for CSS 3. We already encouraged you to experiment with CSS 3 in our last3 posts4 and now you can use this handy cheat sheet to use the new CSS 3 features in some modern browsers (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.). The result is a printable CSS 3 scrib sheet, created and released exclusively for the readers of Smashing Magazine. Thank you for your great work, Chris Hanscom!

In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).

The cheat sheet was done in the same format as the CSS 2 Reference Guide5 that you may want to use for your projects as well.

Download the CSS 3 Cheat Sheet for free!

CSS 3 Cheat Sheet6

Thank you very much, Chris Hanscom! We appreciate your efforts.

Further Resources About CSS 3

Do you use CSS 3 already?

Do you already use CSS 3 in your projects? Would you recommend using CSS 3? Let us know in the comments!


  1. 1 http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
  2. 2 http://www.veign.com/
  3. 3 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  4. 4 http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
  5. 5 http://www.veign.com/reference/css2-guide.php
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/preview.gif
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf
  9. 9 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  10. 10 http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
  11. 11 http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
  12. 12 http://www.opera.com/docs/specs/opera95/css/
  13. 13 https://developer.mozilla.org/en/firefox_3.5_for_developers
  14. 14 http://www.css3.info/preview/
  15. 15 http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html
  16. 16 http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Got a new Twitter Bootstrap 3 Cheat sheet here… it might helpful


↑ Back to top