CSS: Use Shorthand Properties

Summary: Use shorthand properties in CSS to shrink your style sheets.

Shorthand properties allow you to specify a set of related CSS properties with a single property. They combine related properties into a shorthand form. In most cases, the browser sets a default value if you leave out an optional one. There are six shorthand properties in CSS:

font

background

margin

border

padding

list

The most commonly used properties are the font family of properties. With the font shorthand property you can turn this complete declaration:

Note that these values replicate according to the CSS specification when values are omitted. For our example above the top and right values replicate to the bottom and left padding respectively. The margin and border shorthand properties uses the same syntax.

Border Shorthand Properties

The border properties have eight shorthand properties (border-style/width/color, border-top/right/bottom/left and border). The most powerful is the border shorthand property which you can use when all sides of your element have the same values. So instead of this: