Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

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:

background-color: #hex
background-image: url(URL)
background-repeat: repeat | repeat-x | repeat-y | no-repeat
background-position: (top | bottom | center) (left | right | center)
background-attachment: scroll | fixed

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:

background-color: transparent
background-image: none
background-repeat: repeat
background-position: top left
background-attachment: scroll

Font Shorthand

The font properties are:

font-style: normal | italic
font-weight: normal | bold | bolder | | lighter | (100-900)
font-size: (number+unit) | (xx-small - xx-large)
line-height: normal | (number+unit)
font-family:name,"more names"

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:

font-style: normal
font-weight: normal
font-size: inherit
line-height: normal
font-family: inherit;

Border Shorthand

The border properties are:

border-width: ?px
border-style: dotted | dashed | solid | double | groove | ridge | inset | outset
border-color: #hex

These can be combined into one border shorthand as follows:

p { border: 4px solid #666; }

Default border property values if not specified:

border-width: 4px
border-style: solid
border-color: #000000

Outline Shorthand

The outline properties are:

outline-width: ?px
outline-style: dotted | dashed | solid | double
outline-color: #hex

These can be combined into one background shorthand as follows:

p { outline: 4px solid #666; }

Default outline property values if not specified:

outline-width: 4px
outline-style: solid
outline-color: #000000

Margin (and Padding) Shorthand

The margin (and padding) properties are:

margin-top: ?px
margin-right: ?px
margin-bottom: ?px
margin-left: ?px

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 >