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

    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…

    0
  2. 52

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

    0
  3. 103

    Thank you for the share.

    0
  4. 154

    Thanks!

    0
  5. 205

    Dries Van haver

    May 24, 2010 10:57 pm

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

    0
  6. 256

    Both sheets are very useful and look great too!

    0
  7. 307

    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!

    0
  8. 358

    Okay..i see!this might help.

    thanks

    camp fire

    0
  9. 409

    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

    0
  10. 460

    Love the CSS cheat sheet!

    0
  11. 511

    Good one

    0
  12. 562

    Dude where’s my Opera?
    Thanks anyway

    0
  13. 613

    I like it, thank you!

    0

↑ Back to top