CSS units

Lots of the CSS properties accept sizes. Here’s a bit more information.

Length units

Lengths refer to horizontal or vertical measurements. To specify a length, enter a plus or minus sign, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value: 1.3 em is not a valid length value, but 1.3em is. A length of 0 does not require the two-letter unit identifier.

There are two type of lengths: relative and absolute.

Relative units give a length relative to another length property and W3C prefers them because they adjust better to different media (screens and printers for example). The following relative units are available:

The height of the tag's font (em). 1em is equal to the tag's font size. Quite a lot of people recommend this unit because you can be sure that your text is in proportion to the size it would usually be. The size of text also relates to the user's PC settings
The height of the letter "x" (ex)
Pixels (px). Pixels are relative to the resolution of the screen

Absolute length units are very much dependent on the output medium (a Mac is 72dpi and Windows is 96dpi), and so are less useful than relative units. The following absolute units are available:

Inches (in). An inch is roughly 2.54cm
Centimetres (cm)
Millimetres (mm)
Points (pt). A point is roughly 1/72 inch)
Picas (pc). A pica is 12 points

You might decide to use inches, centimetres or millimetres because they are familiar but there are a couple of problems to be aware of.

These units don't take account the size of the screen. A size of 1" may be meaningful on a 21" screen but not on a palmtop. Also what works at 640 x 480 on a 14" monitor may not work at 1024 x 768 on a 17" monitor. And vice versa
Browsers can't interpret 1" inch (nor 0.5cm nor 26mm for that matter) exactly because they don't know how big a screen is. Instead, they convert the unit to a number of pixels. If you run at 96dpi on an 800 x 600 monitor, an inch ought to equal 75 pixels but the browser thinks it 96 pixels. In this case, an inch converts to 1.28"

Percentage units

To specify a percentage, enter a plus or minus sign, followed by a number, followed by %. There are no spaces in a percentage value. For example, -25%, +15% or 75%

Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the tag's parent.

Keywords

Some properties can have keywords. The browser translates the keyword to numerical values. Some example keywords are bold, bolder, smaller, or x-large.

URL values

A url can be absolute or relative. To enter an absolute url, you specify the full path. For example: http://www.ann.com/pages/index.htm. To specify a relative url, enter ../pages/index.htm.