Thursday 11th of March 2010 02:18:30 AM

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!


CLASS="dkblue">...</H2>.

TIP

It's actually better to pick classnames that are descriptive of the type of information containedwithin, not of the visual effect you're trying to achieve atthe moment. For example, let's say that we want the dark bluecolor to be applied to all H2 elements that aresubsection headings. It would be much better to pick a class namelike subsec or even

Youmay have noticed that in almost every circumstance, where we set aforeground color, we also set a background color. In general, this isa good idea. Since you don't know what styles a user may havepredefined, you don't know how your styles might interact withthem. Remember the example where links ended up being white on white?That's the sort of thing we want to avoid.

Let's explore this in a little more detail. Assume thefollowing:background-color, which accepts (unsurprisingly)any valid color.

background-color

The background is the area of the content box and the padding and isalways behind the foreground of the element. Therefore, the declaredbackground color is applied to both the element's content boxand its padding, as illustrated in Figure 6-14:

DIV {border: 1px solid black;}
P.neg {margin-bottom: -50px; width: auto; margin-right: 10px;
margin-left: 10px; border: 3px solid gray;}
<DIV STYLE="width: 420px; background-color: silver;
padding: 10px; margin-top: 75px;">
<P CLASS="neg">
A paragraph.
</P>
</DIV>
<P>