Menu Search
Jump to the content X

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)


Today we are glad to release two useful cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. The help sheets were created by GoSquared1 and released for Smashing Magazine and its readers.


Download the cheat sheets for free! Link

The CSS 2.1 Help Sheet covers Syntax, Font, Text, Margins, Padding, Border, Position, Background, List, Media Types and Keywords. The CSS 3 Help Sheet contains code snippets for Rounded Corners, Box Shadow, Multiple Columns, Text Shadow, RGBa, Font Face (actually, not the CSS3 property, but still include for the sake of usefulness), Box Sizing, Box Resize, Outline and Gradients.



Behind the design Link

As always, here are some insights from the designers:

“We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought we’d make a Help Sheet that didn’t hurt the eyes of anyone who tried to use it. The past year, we’ve found ourselves using more and more CSS3 methods, and there was never much in the way of help out there until we decided to create a Help Sheet specifically for CSS3.

We’ve kept CSS2 and CSS3 on separate Help Sheets for now as not everything in CSS3 is finalised, or works in all browsers (cough, IE).

We hope you enjoy using them, and that they help you create even more memorable, usable, and stylish websites.

Thank you, guys. We really appreciate your work and your good intentions.

You may be interested in the following related posts:

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13

↑ 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

    The CSS3 cheat sheet is pretty useful. Might print this one

  2. 2

    Thanks for posting this… I never remember the CS3 Webkit info.

  3. 3

    So, 12 lines of code to get a rounded corner… is this the bright future we’ve been waiting for?

    • 4

      Someone can’t count. It’s one line if you want all four corners to be the same, and three lines if you want all four corners to be the same in all browsers that support CSS rounded corners. Someday border-radius along will be sufficient.

      • 5

        you could go upto 12 lines if you make an ugly looking rounded corner box.

  4. 6

    Really useful. Only comment is that RGBA values are between 0-255 for RGB and 0-1 for A.

    • 7

      Really? Sounds strange… This means it would only be fully transparent or fully opaque. A normal a channel should have 0-255 so you could use it to set something to be semi-transparent. Or does it mean you can set A to be 0.5?

      • 8

        Yes by 0-1 he means 1 being 100% and 0 being 0% thus making .75 75%. Personally I don’t know why someone would use 0 tho lol… same thing as just using RBG

  5. 9

    Thank you for the helpful resource! It’s a whole new world of round-corner boxes.

  6. 10

    It needs some bug correction :P

  7. 13

    Great sheets, probably gonna use the css3 sheet as there aren’t so many other out there yet!

  8. 14

    Hi guys,

    We’ve updated the CSS3 Help Sheet with the correct RGBA values and sent it over to SM, for now it’s available on our original post at:

    We’ve checked with several people, but are there any other bugs? If so, please say and we’ll get on it.


  9. 15

    Downloaded the PDF, but I get an error stating that it

    “Cannot extract the the embedded font ‘JCTOYI+MyriadPro-Semibold’. Some characters may not display or print correctly.”

    And it doesn’t display or print correctly. :)

    • 16

      Apologies if you’re having an issue with displaying the PDF. We’ve exported with text and artwork compressed, and tested on multiple systems, PC and Mac, with and without Myriad Pro installed. I can provide a version with fonts set in Helvetica if you would like? Or if you only need to print you could use the large size JPG. Sorry for the problems you’re experiencing here.

      • 17

        No problem. Works great on my Mac at home. Printing here. I hate that I have to use Windows at work.

  10. 18

    Nice, immediately printed this baby!
    Never need google again! ;-)

  11. 19

    Great sheet, thanks for sharing! The css3 sheet made my pin-board!


  12. 20

    Helpful but hideous. Can’t win ’em all!

  13. 21

    Thank you very much. Walt

  14. 22

    good to have. … not sure about that hideous comment… please specify.

  15. 23

    »outline« is misplaced: This is a CSS 2.1 property.

    • 24

      Apologies, you’re correct. Thankfully it’s still valid in CSS3 so it’s not doing any harm there. If people can’t live with this, I can try and fit it in on the CSS2 Help Sheet.

  16. 25

    Hi guys, thanks for the continued positive comments. Apologies if anyone (Deezy, only) thinks these are “hideous” but we’ve tried to make them as attractive as we could.

  17. 26

    Seriously, great job, very useful !
    I’ve dowload them in the second, thanks a lot !!

  18. 27

    Christian Munoz

    May 13, 2010 5:40 pm

    These CSS sheets are very handy. Thanks for the continuous support. Great job!

  19. 28

    It’s very helpful!

  20. 29

    Webkit is new to me.. thanks for this wonderful help…

  21. 30

    2.1. – too basicly…

  22. 31

    thanks for css3. but how can i solve css3 for Opera?

  23. 32

    it very usfull

  24. 33

    Thank you, didn’t really dive into CSS3 yet, so this comes in very handy.

  25. 34

    Thank you!

  26. 35

    Great, i just wanted to create such a sheet of my own. :-)

  27. 36

    Grate, It’s really helpful to us. Thank you!

  28. 37

    Great great great!

    Very useful.


  29. 38

    It would be great if you could add the shorthand notation syntaxes, like border: [ <border-width> || <border-style> || <border-color>]

  30. 39

    thanks a lot, it’s sooooooo helpfull and usefull, but it would be great if you add some scipt for the IE browsers.


↑ Back to top