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 New York, dedicated to smart front-end techniques and design patterns.

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

Screenshot3

Screenshot4

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 http://www.gosquared.com/
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large.jpg
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS-Help-Sheet-large.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS2-Help-Sheet.pdf
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet1.pdf
  9. 9 http://www.gosquared.com/liquidicity/archives/1010
  10. 10 https://www.smashingmagazine.com/2010/05/03/vi-editor-linux-terminal-cheat-sheet-pdf/
  11. 11 https://www.smashingmagazine.com/2010/02/10/photoshop-keyboard-shortcuts-cheat-sheet-pdf/
  12. 12 https://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
  13. 13 https://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
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 New York, on June 14–15, 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.

Advertisement
  1. 1

    DaveKingsnorth

    May 13, 2010 11:14 am

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

    0
  2. 2

    Joshua Briley

    May 13, 2010 11:14 am

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

    0
  3. 3

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

    0
    • 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.

      2
      • 5

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

        1
  4. 6

    Robin Fisher

    May 13, 2010 11:28 am

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

    0
    • 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?

      0
      • 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

        0
  5. 9

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

    0
  6. 10

    It needs some bug correction :P

    0
  7. 13

    Fabian Irsara

    May 13, 2010 12:25 pm

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

    0
  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!

    0
  9. 15

    shiftdelete

    May 13, 2010 1:11 pm

    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. :)

    0
    • 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.

      0
      • 17

        shiftdelete

        May 13, 2010 5:30 pm

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

        -1
  10. 18

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

    0
  11. 19

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

    Tedi

    0
  12. 20

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

    0
  13. 21

    Thank you very much. Walt

    0
  14. 22

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

    0
  15. 23

    Thomas Scholz

    May 13, 2010 4:14 pm

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

    0
    • 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.

      0
  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.

    0
  17. 26

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

    0
  18. 27

    Christian Munoz

    May 13, 2010 5:40 pm

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

    0
  19. 28

    Alex Batista

    May 13, 2010 6:46 pm

    It’s very helpful!

    0
  20. 29

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

    0
  21. 30

    Lukasz Bachur

    May 13, 2010 10:13 pm

    2.1. – too basicly…

    0
  22. 31

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

    0
  23. 32

    it very usfull

    0
  24. 33

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

    0
  25. 34

    Thank you!

    0
  26. 35

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

    0
  27. 36

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

    0
  28. 37

    Great great great!

    Very useful.

    Cheers.

    0
  29. 38

    jaronbarends

    May 14, 2010 1:33 am

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

    0
  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.

    0
  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!

    0
  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.

      0
  33. 43

    Phil Benoit

    May 14, 2010 5:34 am

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

    0
  34. 44

    Thanks! Cheatsheets are great!

    0
  35. 45

    LordOfMictlan

    May 14, 2010 6:23 am

    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.

    0
    • 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.

      0
  36. 47

    Great Article!

    0
  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.

    0
  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/

    0
  39. 51

    really thanks for the links of CSS information

    0
  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

    0
    • 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.

      0

↑ Back to top