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) }
Leave a Reply