Main advantages of using CSS is the large reduction in web page download time. Writing mulitple declarations and values in a single line of CSS code called CSS Shorthand Technique.

1.Backgrounds

Background properties include background-color, background-image, background-repeat, background-position, You could write:

background-color: #ccc;

background-image: url(myimage.gif);

background-repeat: no-repeat;

background-position: top left;

Becomes:

background: url(myimage.gif) no-repeat top left;

2. Font

Font properties include several individual properties:

font-size:14px;

line-height:120%;

font-family:arial;

font-style:italic;

font-variant:small-caps;

font-weight:bold;

Can be combined into:

font:italic small-caps bold 14px/120% arial;

3. Lists

List properties include several individual properties:

list-style: #000;

list-style-type: disc;

list-style-position: outside;

list-style-image: url(myimage.gif)

Becomes:

list-style: disc outside url(myimage.gif);

4. Margin & padding

margin or padding properties include several individual properties

Four different values:

margin-top: 4px;

margin-right: 1px;

margin-bottom: 3px;

margin-left: 4px

Becomes:

margin: 4px 1px 3px 4px (top, right, bottom, left);

Three different values

margin-top: 5em;

margin-bottom: 3em;

margin-right: 1em;

margin-left: 1em

Becomes:

margin: 5em 1em 3em (top, right and left, bottom);

Two different values

margin-top: 5px;

margin-right: 3px;

margin-bottom: 5px;

margin-left: 3px;

Becomes:

margin: 5px 3px (top and bottom, right and left);

One different value

margin-top: 0;

margin-right: 0;

margin-bottom: 0;

margin-left: 0

Become:

margin: 0 (top, bottom, right and left);

5. Colours

Mostaly we specify colors by using hexadecimal notation: a (#) followed by six digits. we can also define by keyword by their name.

like:

Black or #000000

Blue or #0000ff

Lime or #00ff00

White or #ffffff

Becomes:

Black or #000000 ——— #000

Blue or #0000ff ——— #00f

Lime or #00ff00 ——— #0f0

White or #ffffff ——— #fff

6. Borders

Borders properties include several individual properties:

border-width:5px;

border-style:solid;

border-color:#fff;

Becomes:

border:5px solid #fff;

This is for all four side

we can also define diffrent width for diffrents sides (left, right. top, bottom )

border-top-width:5px;

border-right-width:6px;

border-bottom-width:7px;

border-left-width:8px;

become:

border-width:5px 6px 7px 8px;

have 0 values

If some property have 0 value then we don’t have to secify the unit( em/px/% )

margin:0px 5px 8px 0px;

become:

margin:0 5px 8px 0;

cheers!!