Struggling for Competence

CSS Shorthand Properties

CSS shorthand properties let you set several properties in one go. The compact form reduces files size, and once you get used to to them are fairly easy to read. WebCredible and 456 Berea St both have good explanations of the shorthand properties. Here is a brief summary.

CSS Shorthand Properties
PropertyExampleDefinition
fontfont: italic small-caps bold 1em/1.5em Arial;style variant weight size/line-height family¹
backgroundbackground:red url(img.gif) repeat fixed top left;color image repeat attachment position ²
list-stylelist-style: disc outside url(img.gif);type position image ²
borderborder: 1px black solid;width style color ²
margin
padding
border-width
margin: 4px 3px 2px 1px;top  right  bottom  left  (clockwise)
margin: 4px 2px 0px;top  right+left  bottom
margin: 4px 2px;top+bottom  right+left
margin: 5px;top+right+bottom+left
¹ size and family are mandatory, and must be in that order. The other properties are optional.
² properties are optional, and may be in any order.

Since the border properties are optional, you can abbreviate the border-width property to border, for example, border: 5px;