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;
Using CSS more efficiently will reduce the code & will help to load your site faster.
