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
Property Example Definition
font font: italic small-caps bold 1em/1.5em Arial; style variant weight size/line-height family¹
background background:red url(img.gif) repeat fixed top left; color image repeat attachment position ²
list-style list-style: disc outside url(img.gif); type position image ²
border border: 1px black solid; width style color ²
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;

Leave a Reply

Your email address will not be published. Required fields are marked *