Quick CSS3 and CSS2 shorthand guide

CSS2 and CSS3 Shorthand Guide

CSS shorthand can really help you reduce and optimize CSS files. Instead of using multi-lines of properties, we can make it one liner. The following is the CSS3 and CSS2 shorthands properties:

1. CSS Margin

01 02 03 04 05 06 07 08 09 10

/* use Margin shorthand*/ h1 {margin:5px  10px  5px  10px;} /* instead of */ h1 {margin-top:5px;     margin-right:10px;     margin-bottom:5px;     margin-left:10px; }

2. CSS Padding

1 2 3 4 5 6 7 8

h1 {Padding :5px  10px  5px  10px;} /* instead of */ h1 {Padding-top:5px;     Padding-right:10px;     Padding-bottom:5px;     Padding-left:10px; }

3. CSS Border

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

h1 {border:1px solid #CCC;} /* instead of */ h1 {border-width:1px;     border-style:solid;     border-color:#CCC; } /*** Use border width shorthand ****/ h1 {border-width:1px 2px 3px 4px;}    h1 {border-top-width:1px;     border-right-width:2px;     border-bottom-width:3px;     border-left-width:4px; }

5. CSS3 border-radius

1 2 3 4 5 6 7 8 9

div {border-radius:1px  2px  3px  4px;} /* instead of */ div {      border-top-left-radius: 1px;      border-top-right-radius: 2px;      border-bottom-right-radius: 3px;      border-bottom-left-radius: 4px; }

6. CSS background

01 02 03 04 05 06 07 08 09 10

div {background:#f00 url(background.gif) no-repeat fixed 0 0;} /* instead of */ div {      background-color:#f00;      background-image:url(background.gif);      background-repeat:no-repeat;      background-attachment:fixed;      background-position:0 0;  /* left top */ }

7. CSS Font

01 02 03 04 05 06 07 08 09 10 11 12 13 14

h1 {font:italic small-caps bold 12px/160% "Lucida Grande",sans-serif;} /*or with out some optional values*/ h1 {font:bold 12px/160% "Lucida Grande",sans-serif;} /* instead of */ h1 {font-style:italic;     font-variant:small-caps;     font-weight:bold;     font-size:12px;     line-height:160%;     font-family:"Lucida Grande",sans-serif; }

8. CSS list-style

1 2 3 4 5 6 7

ul {list-style:square inside url(image.gif);} /* instead of */ ul {list-style-type:square;     list-style-position:inside;     list-style-image:url(image.gif); }

9. CSS Color

when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:
#000000 becomes #000, #336699 becomes #369.

1 2 3 4

h1 {color:#000} /* instead of */ h1 {color:#000000;}

10. CSS3 box shadow

01 02 03 04 05 06 07 08 09 10 11 12

-moz-box-shadow:    3px 4px 5px 6px #ccc;  /* for mozilla*/ -webkit-box-shadow: 3px 4px 5px 6px #ccc; /* for chrome and safari */ box-shadow:         3px 4px 5px 6px #ccc; /* 1.  3px - The horizontal offset (The X-coordinate) 2.  4px - The vertical offset (The y-coordinate) 3.  5px - The blur radius (optional) 4.  6px - The spread radius (optional) 5.  #CCC - Color */

11. CSS3 text-shadow

1 2 3 4 5 6 7 8

text-shadow: 1px 2px 3px #000; /* 1.  1px - The horizontal offset (The x-coordinate) 2.  2px - The vertical offset (The y-coordinate) 3.  3px - The blur radius (optional) 4.  #000- Color */

12. CSS3 transition

CSS3 Transitions allow property changes in CSS values to occur smoothly over a specified duration.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

-webkit-transition: background 0.3s ease;    /* chrome & safari */   -moz-transition: background 0.3s ease;      /* Mozilla */   -o-transition: background 0.3s ease;       /* opera */   transition: background 0.3s ease; /* insted of */ transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; /* 1.  background  - transition-property: The property to be transitioned (in this case, the background property): The property to be transitioned (in this case, the background property). 2.  0.3s - transition-duration (The y-coordinate) 3.  ease - transition-timing-function(optional) */

13. CSS3 Animation shorthand

animation: name duration timing-function delay iteration-count direction;

01 02 03 04 05 06 07 08 09 10 11 12 13

-moz-animation: myfirst 5s linear 2s infinite alternate;    /* Firefox: */ -webkit-animation: myfirst 5s linear 2s infinite alternate;  /* Safari and Chrome: */ -o-animation: myfirst 5s linear 2s infinite alternate;  /* Opera: */ animation: myfirst 5s linear 2s infinite alternate; /* insted of */ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;

14. Comma separated declarations

1 2 3

h1, h2, h3, h4, h5, h6 {     font-family:Helvetica, Verdana, sans-serif; }