Reference: CSS Units
Level: Beginner. Published on 18 September 2001 in CSS
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) }
Share and enjoy
If you liked this article, you can share it with others by adding it to any of the following social bookmarking sites:
Link to this page
Feel free to link to this article in your own Web pages. Click one of the boxes below to select the text, then copy and paste it into your page:
Keep in touch
Subscribe to our feed or follow us on Twitter for news of our latest articles and other fun stuff.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you need help with a Web-building issue, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!
