CSS Tutorials > CSS Units
CSS Units
This tutorial lists all the units that can be used within 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 URL's.
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, usually the element's font size.
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. Although there is no official standard for these colours, Microsoft and Netscape browsers support hundreds of these colour names.
For example:
body { color: white; background: black }
h1 { color: red }
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
which is <B STYLE="font-size: 24px;">boldfaced</B> and which is<BR>
larger than the surrounding text.
</P>
What we have here is a situation where some of the text has a font-size of 12px , while other text has a size of 24px . However, all of the text has a line-height of 12px, since line-height is an inherited property. What happens is that the difference between font-size
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: #FFFF00 |
#RGB |
Short-hand red-green-blue 3-digit hex number: each digit is replicated to produce the final colour, e.g. #123 -> #112233 |
color: #0FF |
rgb(R, G, B) |
Decimal representation, each value being an integer between 0 and 255 |
color: rgb(255,192,255) |
rgb(R%, G%, B%) |
Percentage representation, each value being a percentage between 0.0% and 100.0% |
color: rgb(100%,80%,50%) |
URL's
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) }
The End
That's the end of this tutorial. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of my and other webmasters.
If you would like to offer us feedback on this or any of the tutorials, please contact us. Have fun!