Slacker's Guide to HTML: Measurement in CSS Cascading Style Sheets

Measurement in Style Sheets (CSS)

The introduction of CSS let webmasters take much greater control over their content. With this new freedom we can specify exactly what we want to do with different HTML elements. Measurements come in to play with this increase in control.

Measurements are very important in stylesheets. You can use any one of the following units of measurement to designate the size, width, height, length, or distance of an object.

Points (pt}
Pixels (px)
Inches (in)
Centimeters (cm)
Millimeters (mm)
Picas (pc)
Element font-height (em)
Element X-height (em)
Percentage (%)

Applying these measurements can vary considering the circumstances and what property they are to be values of.

Check out this quote I pulled from Webmonkey (and then altered) concerning CSS and measurement:

Units of Measure

In this blurb, abstract values (notably values involving units of measure) appear between angle brackets: <color>. They should be replaced by actual values as indicated in the key below.

Length Units

<length> indicates a number followed by a unit of measure:
24px, for example.
The number can be an integer or a decimal fraction, and can be preceded by + or -.
-24.5pt, for example.

Units can be absolute or relative:
Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas)
Relative: em, ex, px (the element's font height, the element's x-height, pixels)

Font-size may be defined in points, pixels, inches, or centimeters (pt, px, in, cm) or as a percentage (%)
<Absolute-size> can be: xx-small, x-small, small, medium, large, x-large, xx-large
<Relative-size> can be: larger, smaller

Percentage Units
<Percentage> indicates a number followed by a % sign: 50%, for example.
In the text-indent, margin, padding, and width properties, percentage values are relative to the width of the parent element.
In the font-size property, percentage values are relative to the font size of the parent element.
In Color values, percentages can be used to express RGB values.

Color Units
<Color> can represent either <color-name> or <rgb> values, as defined below:
<Color-name> can be: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
<RGB> can be: #<hex><hex><hex> rgb(<number>, <number>, <number>) rgb(<percentage>,<percentage>,<percentage>)
<hex> represents a hexidecimal value, <number> a decimal value, and <percentage> a percentage.

As you can see, CSS affords you complete control over color, position, size, and dimension of your HTML elements. Understanding the measurement systems you can use will let you use CSS to the fullest and will help you make truly dynamic pages.