Monday, September 7, 2009

Useful CSS Shortcut Tricks

CSS Shortcut Tricks

Font Properties

Font {
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;
}

Here is the shortcut

font: bold italic small-caps 1em/1.5em verdana,sans-serif;


Border Properties

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

Here is the shortcut

Border {
border:1px solid #000;
}

Padding Properties

padding {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
}

Here is the shortcut

padding {
padding:5px 10px 5px 10px;
}


Background properties

.background {
background-image:url(images/img.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#000;
}

Here is the shortcut

.background {
background: #000 url(images/img.jpg) repeat-x top;
}

Font Properties

body {
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
}

Here is the shortcut

body {
font: bold 0.8em/1.2em verdana, sans-serif;
}