London Web Hosting

There is actually no official guideline for each CSS shorthand property value, however this may help you during design work that we have organized collectively.

Background
background-color:#fff;
background-image:url(background.gif);
background-repeat:no-repeat;
background-position:top left;

Woh… it’s too long, take a look at this.
background:#fff url(background.gif) no-repeat top left;

Font
font-size:1em;
line-height:2em;
font-weight:bold;
font-style:italic;
font-family:arial;

Shorthand:
font:1em/2em bold italic serif;

Margin & padding
There are different shorthand properties for margin & padding.

Four different values
margin-top:10px;
margin-right:5px;
margin-bottom:15px;
margin-left:20px;

shorthand:
margin:10px 5px 15px 20px; (top, right, bottom, left)

Three different values
margin-top:10px;
margin-right:5px;
margin-bottom:15px;
margin-left:5px;

shorthand:
margin:10px 5px 15px; (top, right and left, bottom)

Two different values
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;

shorthand:
margin:10px 20px; (top and bottom, right and left)

One value
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

shorthand:
margin:10px; (top, bottom, right and left)

These rules also apply to padding and border.

Border
border-width:1px;
border-color:#000;
border-style:solid;

shorthand:
border:1px solid #000;

border:1px solid #f00;
border-left:5px dotted #00f;
border-top:10px dotted #00f;

shorthand:
border:1px solid #336;
border-width:10px 1px 1px 5px;
border-color:#00f #f00 #f00 #00f;

Lists
list-style:#fff;
list-style-type:none;
list-style-position:outside;
list-style-image:url(bullet.gif);

Shorthand:
list-style: none outside url(bullet.gif);

Color
color:#000000;

shorthand:
color:#000;

These values as defined for RGB, if both R values are similar (00 in current example), then you can combine them as one (0).

Amother example

color:#00ff00;

shorthand:
color:#0f0;