CSS shorthand tutorials

[D856C]

CSS shorthand is a great way to write a smaller, faster-loading CSS file. For example you can write

body{  
 background: url("bg.gif");  
 background-color: #fff;  
 background-repeat: repeat-x;  
}

In CSS shorthand the following accomplishes the same thing:

body {
 background: url("bg.gif") #fff repeat-x;
}

Introduction to CSS Shorthand

CSS Shorthand Guide

Efficient CSS with shorthand properties

[katie roos]

My first bookmarked thread!

[docsharp]

Great info thanks for sharing

[Marc]

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

Can also be written as:

element{
     margin:10px 5px 10px 5px;
}

ie: margin:top | right | bottom | left;

Or as two values:

element{
     margin:10px 5px;
}

ie: margin: top and bottom | left and right;


This can also be used for padding

[tommylogic]

yes.. very nifty talent to shorthand.
I find it useful for your own personal works, but that clients like it when I clearly lable and longhand ALL the element properties.

[Kelly]

Geeks!

[tommylogic]

Geeks!

:larf: Yeah.. we can't all live off our good looks I'm affraid...

[PadraigCurran]

Thats amazing stuff.

[Mack]

Geeks!

:bat hit:

[PadraigCurran]

Without "geeks", this forum wouldn't exist.l