CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

Advertisement

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.

2

Download the cheat sheets for free!

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.

Screenshot3

Screenshot4

Behind the design

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.

Related Posts

You may be interested in the following related posts:

Footnotes

  1. 1 http://www.gosquared.com/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS-Help-Sheet-large.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS2-Help-Sheet.pdf
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet1.pdf
  9. 9 http://www.gosquared.com/liquidicity/archives/1010
  10. 10 http://www.smashingmagazine.com/2010/05/03/vi-editor-linux-terminal-cheat-sheet-pdf/
  11. 11 http://www.smashingmagazine.com/2010/02/10/photoshop-keyboard-shortcuts-cheat-sheet-pdf/
  12. 12 http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
  13. 13 http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/

↑ Back to topShare on Twitter

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.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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.

  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:

    http://www.gosquared.com/liquidicity/archives/1010

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

    Thanks!

  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!

    Tedi

  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.

    Cheers.

  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.

  31. 40

    Nice idea, and bits of it are really useful summaries, but I have a couple of issues (sorry!)

    On the css 2.1 sheet you have a section called ‘General’, where you have a mix of selector syntax, where you decribe how to select a tag by its class or ID, then you have a bit of HTML markup info about divs and spans, then you have a bit of CSS attribute info, about color and overflow etc.

    It’s actually really unhelpful to mix up these three types of information under one heading as you are implying that these are all the same type of information, which they are not.

    There is also an error I think: you give color as ‘foreground color’. As far as I know, this attribute only controls text color. If that’s what you mean by ‘foreground’ I think it may confuse some people.

    It’s not really clear what the ‘shorthand’ box is for either.

    One final comment… without re-opening the IE6 debate, some people (like me) still have to develop for IE6 due to Government users who still have to struggle with it, sadly. So glibly adding a comment like ‘developing for IE6 is a lost cause’ may be something we can all empathise with, unfortunately some of us still have to, and new designers need to know that they may have to for a while too at least.

    Thanks!

  32. 41
    • 42

      Awesome – that looks pretty useful.

      If anyone needs more detail than what our Help Sheets provide, W3C is the place to go.

  33. 43

    Thanks for this, it will be up on the wall for the next few months!

  34. 44

    Thanks! Cheatsheets are great!

  35. 45

    Much better cheat sheets for CSS:

    http://www.w3schools.com/css/css_reference.asp
    http://www.veign.com/downloads/guides/qrg0008.pdf

    The ones offered in this post would only be useful if you had no experience at all with CSS.

    • 46

      They look like some great cheatsheets.

      Our Help Sheets may not be for everyone, but they certainly cover enough to be useful to more than just beginners.

      It’s a difficult balance to get a useful amount of information on to 2 Help Sheets, ensure they’re readable, look attractive, and remain helpful. As with any design, we had to make a few tradeoffs to meet those priorities.

  36. 47

    Great Article!

  37. 49

    Jean-Francois Monfette

    May 14, 2010 6:52 am

    Once again Smashing Magazine does a smashing good job. Thanks a lot for those very useful cheat sheets.

  38. 50

    6.2. The ‘box-shadow’ property

    This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.

    and the lastest version is inset || [ <length> <length> <length>? <length>? || <color> ]
    http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow
    http://leeiio.me/css3-box-shadow-removed/

  39. 51

    really thanks for the links of CSS information

  40. 52

    Hey

    It seems you aren’t outlines Your PDF source file. I am having problem rendering Your PDF font. as i am not on Mac. Will u please outline Your source pdf file which break fonts. Please update link

    Thanks

    • 53

      Hi Anjum, thanks for the comment here and on our own site – we’ll see what we can do to ensure the PDF displays better for those without Myriad Pro. Apologies for not outlining the font before, we assumed that we had, but evidently we were mistaken.

  41. 54

    I must download cheet sheets. Very essential for me. I am visiting another related pages in another tab. I like to share this pdf files in my blog (http://netgator.blogspot.com). Would you please give me permission to do that.

    Thanks

  42. 55

    CSS3 cheat sheet is very much helpful.

  43. 56

    Box shadow can also be ‘inset’, have negative values and have variable opacity.

    e.g.: -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,.4)

    Also, rounded corner shortcuts don’t have to be equal in one line declaration.

    e.g.: -moz-border-radius: 0 4px 4px 0 (top left, top right, bottom right, bottom left).

    Also saves trouble remembering the difference between -webkit-border-top-left-radius and -moz-border-radius-topleft.

    Crossbrowser gradients:
    Firefox: background-image: -moz-linear-gradient(#eee, #ccc);
    Webkit: background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    IE filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#eeeeee, endColorStr=#cccccc);

  44. 57

    Thank you, you have no idea how helpful this is. Simple, and helpful.

  45. 58

    Rosti The Snowman

    May 18, 2010 1:42 am

    Brilliant post very helpful!

  46. 59

    Hey….thank you very much for the nice post.

    regards
    nair

  47. 60

    what about ie6 ?? is it compatible for ie6?? and the hopeless answer NO…..

  48. 61

    thanks …can’t wait to read the css3 cheat sheet

  49. 62

    Thanks for the great cheatsheet. One question though:

    Any reason why you chose to use “src: local(’ ‘),” over “src: local(‘☺’).”?

  50. 63

    its very nice idea. I also use these properties. thanks

  51. 64

    Michael Persson

    May 19, 2010 4:35 am

    Great links, thanks also for the great smashing book, I’m reading it now and its really useful…

  52. 65

    I’ve always wanted a cheat sheets for CSS3 :) Thank you

  53. 66

    Thank you for the share.

  54. 67

    Thanks!

  55. 68

    Dries Van haver

    May 24, 2010 10:57 pm

    Nice one, it ‘ll role out of my printer…

  56. 69

    Both sheets are very useful and look great too!

  57. 70

    For anyone who was having trouble reading these Help Sheets due to font issues, we’ve published new versions on the GoSquared site with all text outlined:

    http://www.gosquared.com/liquidicity/archives/1010

    I hope this helps, and thanks for your patience!

  58. 71

    Okay..i see!this might help.

    thanks

    camp fire

  59. 72

    The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

    ipad tablet

  60. 73

    Love the CSS cheat sheet!

  61. 74

    Good one

  62. 75

    Dude where’s my Opera?
    Thanks anyway

  63. 76

    I like it, thank you!

↑ Back to top