Tuesday 07th of February 2012 01:02:55 AM

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.

italics tags, and almost everything in between -- list items, entire lists, headings, hyperlinks, table cells, form elements, and even (in a limited fashion) images. In order to understand how this works, though, it's important to understand what's in the foreground of an element and what isn't.

What's the foreground of an element? Generally speaking, it's the text of an element, although that isn't the whole story: the borders around an element are also considered to be part of its foreground. Thus, there are two ways to directly affect

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 }

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!

It's important to remember that CSS comments cannot be nested. So, for example, this would not be correct:

/* This is a comment, in which we find
another comment, which is WRONG
/* Another comment */
and back to the first comment */

However, it's hardly ever desirable to nest comments, so this limitation is no big deal.

the inner top of its parent.

Another simple rule. This one keeps floating elements from floatingall the way to the top of the document. The correct behavior isillustrated in Figure 8-33.

Figure 8-33. Unlike balloons, floated elements can't float upward

5. A floating element's top may not be higher thanthe top of any earlier floating or block-level element.

P {margin-left: 100px; margin-right: 100px;} /* same as before */

WARNING

In practice, only browsers released in early 1999 or later correctly handle auto, and not even all of them get it right. Those that do not handle auto margins correctly will behave in inconsistent ways, but the safest bet is to assume that they will set both margins to zero. The browsers that do get this right are Internet Explorer 4.5 and 5 for Macintosh, and Opera 3.6. typically programmers either are trained in its use or pick it up through experience. Either way, most programmers are comfortable with hex notation -- some of them even think in it -- and so it's part of the CSS specification. Why? Because the specification was written and edited by programmers. It makes sense that they'd put in color schemes to which they could relate.

So, by stringing together three hex pairs, you can set a color. A more generic description of this method is: