Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 Guide that you may want to use for your projects as well.

Download the CSS 3 Cheat Sheet for free! Link

CSS 3 Cheat Sheet5

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

Further Resources About CSS 3 Link

Do you use CSS 3 already? Link

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

Footnotes Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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

    Kevin Bishop

    July 13, 2009 7:09 am

    First!!! Cheers!

    -2
  2. 2

    CSS 3 rocks, IE sucks ;-) .

    I don’t understand why M$ doesn’t make IE CSS 3 compatible. If they don’t know how to do that, then why don’t they take a look in the source code of the Gecko engine?!

    4
  3. 3

    Lisztomania

    July 13, 2009 8:31 am

    That’s exactly what I needed thank you! Will come in great handy with my web developing ;)

    0
  4. 4

    This Cheat Sheet is ugly and useless – a cobbler should stick to his last.

    -4
  5. 5

    News O Mator

    July 13, 2009 2:40 pm

    To be honest – This .PDF (while appreciated) isn’t exactly an exclusive CSS3 only cheat-sheet. I could have done without the additions of what floats, text-align and other non-CSS3 attributes do.

    And to the people asking if there is something to make non-compatible browsers do these CSS3 attributes (there isn’t, that I know about) – But, jQuery does allow you to do many things CSS3 does (through the use of plugins and core functionality). 95% of all browsers have JavaScript enabled, which is better odds than those who use browsers that cannot support CSS3.

    -2
  6. 6

    elton lester

    July 13, 2009 3:07 pm

    Cool – how about a smaller one with just the changes/additions etc between CSS2 and CSS3 – thanks

    1
  7. 7

    So, what browsers actually support CSS3 fully enough for it to actually be usable in projects? There is no point in using CSS3 for one or two specific browsers and then CSS2 for every other browser.

    When will browser makers (especially Microsoft) start really delivering what developers need?

    1
  8. 8

    I agree with Mark – this stuff is cool but I’d never use it… I’ll reference this guide 2 years from now.

    1
  9. 9

    In response to Mark, the latest versions of Firefox, Chrome, and Safari all support CSS 3, leaving Internet Explorer and others out of the look.

    I think the important thing to note is the subtle additions with CSS 3. Rounded corners and drop shadows add to a page on a browser that supports CSS 3, but are additions that aren’t sorely missed if they aren’t supported.

    0
  10. 10

    Isn’t there any third pary work-around to make older browsers compatible with the css3 support?

    1
  11. 11

    I have used a few bits and bobs with regards to CSS3 and so far I am quite happy, the only problem is finding solutions when they don’t render in no CSS3 compliant browsers. It is a very similar situation to HTML5 which they say will replace XHTML. V.good, but browsers need to catch up.

    Cheers for the cheat sheet thought SM.

    Come on Microsoft, IE is the bain of every designer and devleopers life… get it sorted…

    1
  12. 12

    Nice work, gents! I’ve been experimenting with CSS3 in my own projects. Sadly, I’m not allowed to incorporate many of these into projects at my day job. Thanks!

    0
  13. 13

    sweet

    0
  14. 14

    It seems every web design site and his dog has an article on CSS3 at the moment, which is silly. Its good to know where things are headed but everyone is making out like we can actually use it!

    It’d be nice to use it but clients aren’t going to want to pay you to do two versions!

    1
  15. 15

    I just twittered this.. great!

    0
  16. 16

    I’m still wondering what’s the use of using CSS3 if Uncle Bill doesn’t use CSS3 in IE?

    0
  17. 17

    Why and when using css3? well, think about progressive enhancement.

    0
  18. 18

    Chris Robinson

    July 13, 2009 11:02 am

    Seems a little early to premature a CSS3 cheat sheet seeing as how the browser support is slim to none at the current.

    0
  19. 19

    Cool & useful stuff, looking forward to use CSS3 more.

    0
  20. 20

    Thanks for this and we need more cheat sheets

    0

↑ Back to top