CSS Beginner tutorial 10 : Shorthand Properties

Shorthand Properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces. For example, margin, padding and border-width allow you to set margin-top-width, margin-right-width, margin-bottom-width etc. in the form of property: top right bottom left; For example we have following code to set border width. of a paragraph


p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}


This can be summed up into one shorthand property as follows.


p {
border-width: 1px 5px 10px 20px;
}


Further, border-width, border-color and border-style can also be summed up as follow.


p {
border: 1px red solid;
}


By stating just two values in format margin: 1em 10em; , the first value will be the top and bottom and the second value will be the right and left.


Font-related properties can also be gathered together with the font property. For example


p {
font: italic bold 1em/1.5 courier;
}


Where the '/1.5' is the line-height.

See Also