D S Kaletha

Web Designer & Developer

CSS Cheat Sheet

The CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 3) 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. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size CSS cheat sheet

>>Download css cheat sheet in pdf 120.kb

Rounded Corners

Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

width: 300px;
background-color: #cccccc;
border: 1px solid #999999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
padding: 15px 15px 15px 15px;
Box Shadows

Object shadows work with Firefox, Safari and Chrome. Here is a great tutorial with many more examples for box shadows. There are also several workarounds for Internet Explorer.

width: 300px; background-color: #cccccc;
border: 1px solid #999999;
box-shadow: 3px 3px 3px #aaaaaa;
-moz-box-shadow: 3px 3px 3px #aaaaaa;
-webkit-box-shadow: 3px 3px 3px #aaaaaa;
padding: 15px 15px 15px 15px;
Transform Rotate

CSS transforms work with Firefox, Safari and Chrome. For IE, it is possible to add similar effects via matrix filters.

margin: 50px 0 50px 0;
width: 200px;
transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
Column Layout

Column Layout is supported in Safari and Firefox. This degrades gracefully on other browsers by reverting to a standard one column layout.

width: 600px;
padding: 15px 15px 15px 15px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-moz-column-count: 2;
-moz-column-gap: 30px;

>>Download css cheat sheet in pdf 120.kb

Tags: , , , , ,

This entry was posted on Thursday, May 6th, 2010 at 2:39 am and is filed under Css Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “CSS Cheat Sheet”

  1. Tweets that mention deepakkaletha.com » Blog Archive » CSS Cheat Sheet -- Topsy.com says:
    May 7, 2010 at 10:29 am

    [...] This post was mentioned on Twitter by Deepak kaletha. Deepak kaletha said: CSS CHEAT SHEET http://deepakkaletha.com/css-cheat-sheet-18 [...]

  2. Pradeep says:
    May 8, 2010 at 11:39 am

    hi,
    nice css trick
    thanks

  3. Emily says:
    June 3, 2010 at 11:42 am

    [...] This post was mentioned on Twitter by Deepak kaletha. Deepak kaletha said: CSS CHEAT SHEET http://deepakkaletha.com/css-cheat-sheet-18 [...]

  4. Emily says:
    June 3, 2010 at 12:11 pm

    hi,
    nice css trick
    thanks

  5. Amy says:
    June 6, 2010 at 8:27 am

    hi,
    nice css trick
    thanks

Leave a Reply