There have been a number of occasions when looking over other developers CSS I notice bits of code similar to the following…

#div {
      margin-top: 20px;
      margin-bottom: 10px;
      margin-right: 5px;
      margin-left: 25px;
      padding-top: 10px;
      padding-bottom: 15px;
      border-width: 1px;
      border-style: solid;
      border-color: #666666;
      font-family: Verdana, Helvetica, Arial;
      font-size: 14px;
      font-weight: bold;
}

The above code is littered with properties that could easily be combined for more legible code and decreased file size. Some properties might even be removed altogether since they default to the desired value. Below you will find before and after examples of some of the most useful CSS shorthand properties. As a general rule any browser later than IE5 should support all of these.

Margin & Padding

#div {
      margin-top: 0;
      margin-right: 5px;
      margin-bottom: 10px;
      margin-left: 15px;
      (auto, 0, px, pt, em or % )
}

#div {
      margin:0 5px 10px 15px;
      (top right bottom left)
}

and

#div {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 0;
      margin-left: 20px;
}

#div {
      margin:10px 20px 0;
      (top right/left bottom)
}

and

#div {
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 0;
      margin-left: auto;
}

#div {
      margin:0 auto;
      (top/bottom left/right)
}

and

#div {
      margin-top: 50px;
      margin-right: 50px;
      margin-bottom: 50px;
      margin-left: 50px;
}

#div {
      margin:50px;
      (top/right/bottom/left)
}

Border

#div {
      border-width: 5px;
      (thin, thick, medium or set value) (default = medium)
      border-style: dotted;
      (solid, dashed, dotted, double, etc) (default = none)
      border-color: blue;
      (named, hex, rgb or 0-255) (default = value of elements/elements parent color property)
}

#div {
      border:5px dotted blue;
}

and

#div {
      border-right-width: 2px;
      border-right-style: solid;
      border-right-color: #666666;
}

#div {
      border-right:2px solid #666;
}

and

#div {
      border-top-width: 3px;
      border-right-width: 2px;
      border-bottom-width: 3px;
      border-left-width: 2px;
}

#div {
      border-width:3px 2px;
}

Background

#div {
      background-color: #CCCCCC;
      (named, hex, rgb or 0-255) (default = transparent)
      background-image: url(images/bg.gif);
      (url or none) (default = none)
      background-repeat: no-repeat;
      (repeat, repeat-x, repeat-y  or no-repeat) (default = repeat)
      background-attachment: scroll;
      (fixed or scroll) (default = scroll)
      background-position: top left;
      (top, right, left, bottom or center) (default = 0% 0%)
}

#div {
      background:#CCC url(images/bg.gif) no-repeat 0 0;
}

Font

#div {
      font-family: Verdana, Arial, Helvetica;
      (Verdana, Arial, “Times New Roman”, etc) (default = varies by browser)
      font-size: 12px;
      (xx-small, medium, x-large, set value, etc) (default = medium)
      font-weight: bold;
      (normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
      font-style: italic;
      (normal, italic or oblique) (default = normal)
      font-variant: normal;
      (normal or small-caps) (default = normal)
      line-height: 1.5px;
      (normal, px, pt, em or %) (default = normal)
}

#div {
      font:italic bold  12px/1.5px Verdana, Arial, Helvetica;
}

List

#div {
      list-style-image: url(images/bullet.gif);
      (url or none) (default = none)
      list-style-position: inside;
      (inside or outside) (default = outside)
      list-style-type: square;
      (circle, disc, square, etc) (default = disc)
}

#div {
      list-style:square inside url(images/bullet.gif);
}

Colors

      Black: #000000 to #000
      Blue: #0000ff to #00f
      Dark Grey: #666666 to #666
      Light Grey: #cccccc to #ccc
      Orange: #ff6600 to $f60
      White: #ffffff to #fff