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!
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.
- CSS 2.1 Sheet (large preview)5
- CSS 3 Sheet (large preview)6
- download the CSS 2.1 Sheet (PDF)7 (0.2 Mb)
- download the CSS 3 Sheet (PDF)8 (updated, 0.2 Mb)
- release post on the designers’ page9
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.
You may be interested in the following related posts:
- VI Editor / Linux Terminal Cheat Sheet (PDF)10
- Photoshop Keyboard Shortcuts Cheat Sheet (PDF)11
- HTML 5 Cheat Sheet (PDF)12
- Detailed CSS 3 Cheat Sheet (PDF)13
- 1 http://www.gosquared.com/
- 2 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large.jpg
- 3 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
- 4 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
- 5 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS-Help-Sheet-large.jpg
- 6 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet-large1.jpg
- 7 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS2-Help-Sheet.pdf
- 8 http://www.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet1.pdf
- 9 http://www.gosquared.com/liquidicity/archives/1010
- 10 http://www.smashingmagazine.com/2010/05/03/vi-editor-linux-terminal-cheat-sheet-pdf/
- 11 http://www.smashingmagazine.com/2010/02/10/photoshop-keyboard-shortcuts-cheat-sheet-pdf/
- 12 http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
- 13 http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/