Webwork
/
CSS Shorthands

There are several CSS properties that can have their style tags written in "shorthand" which saves time and cleans up your code. The most common ones are listed here.

Background Shorthand

The background properties are:

These can be combined into one background shorthand as follows:

div { background: #fff url(image.png) no-repeat top right fixed; }

Default background property values if not specified:

Font Shorthand

The font properties are:

These can be combined into one font shorthand as follows:

p { font: bold 12px/18px georgia,"times new roman",serif; }

Default font property values if not specified:

Border Shorthand

The border properties are:

These can be combined into one border shorthand as follows:

p { border: 4px solid #666; }

Default border property values if not specified:

Outline Shorthand

The outline properties are:

These can be combined into one background shorthand as follows:

p { outline: 4px solid #666; }

Default outline property values if not specified:

Margin (and Padding) Shorthand

The margin (and padding) properties are:

These can be combined into one margin (or padding) shorthand as follows:

CSS:
div { margin: 10px; }
Example:
10px margin all 4 sides
div { margin: 50px 20px; }
50px margin top & bottom +
20px margin left & right
div { margin: 10px 10px 50px 50px; }
        (order: top right bottom left)
10px margin top +
10px margin right +
50px margin bottom +
50px margin left
div { margin: 20px auto; }
20px margin top & bottom +
browser determines left and
right (content will be
horizontally centered).

Hex Color Shorthand

This one's pretty simple. If the hexadecimal color you are specifying consists of three pairs of numbers, you can reduce that to three individual numbers and the browser will still display the correct color.

Hex Color:
#ff0000
Shorthand:
#f00
Web page:
Hex Color:
#00ffff
Shorthand:
#0ff
Web page:

#000 = black, #fff = white, and so on.

Previous | Webwork Table of Contents | Next >