CSS Units

A description of all the units that can be used with CSS level 1, including lengths, percentages, colours and URLs.

This reference lists all the units that can be used within CSS level 1 style sheets. The units are used to specify things like distances and colours.

The units can be grouped into four types: length units, percentage units, colour units and URLs.

Length units

There are 8 length units in the CSS specification. Of these, 3 are relative units, and 5 are absolute units.

Relative length units

These units are relative to another length property. Use relative units when you want your pages to scale well across a range of output devices - for example, if you want your page to look good on the screen and when it's printed out.

Unit Description Example
em The height of the element's font letter-spacing: 0.1em
ex The height of the letter 'x' in the element's font margin: 1ex
px Pixels font-size: 12px

Absolute length units

These units are "real-world" units. They are best used for print work, or other occasions when the type of output device is known.

Unit Description Example
in Inches line-height: 0.5in
cm Centimetres margin-top: 2cm
mm Millimetres letter-spacing: 1mm
pt Points (1pt = 1/72in) font-size: 14pt
pc Picas (1pc = 12pt) font-size: 2pc

Percentage units

Percentage units are always relative to another value, often the element's font size or the size of the parent element.

For example:


/* 150% of the element's font size: */
    h4 { line-height: 150% }

/* 10% of the line width: */
    p { text-indent: 10% }

Colour units

Colours in CSS are specified using either a colour keyword (name), or an RGB value in one of several possible formats.

Colour keywords

Colours can be specified using names such as black, white, red etc. A full list of these so-called "X11 colours", supported in most modern browsers, is available here.

For example:


body { color: white; background-color: Sienna; }
h1 { color: DarkGreen; }

Colour RGB values

The best way to specify colours in CSS is using RGB values, which ensures that the exact colour will be used. Colours can be specified in any of the following ways:

Unit Description Example
#RRGGBB Standard HTML red-green-blue 6-digit hex number color: #FF0000
#RGB Short-hand red-green-blue 3-digit hex number: each digit is replicated to produce the final colour, e.g. #123 -> #112233 color: #0CC
rgb(R, G, B) Decimal representation, each value being an integer between 0 and 255 color: rgb(255,128,255)
rgb(R%, G%, B%) Percentage representation, each value being a percentage between 0.0% and 100.0% color: rgb(40%,70%,40%)

URLs

A URL is specified using the following format:


url("http://www.url.com/images/box.gif")

The double quotes around the URL can be replaced with single quotes, or omitted altogether.

For example:


body { background-image:
url(http://www.url.com/images/background.jpg) }

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page