Understanding CSS Units of Measure

In this post I'd like to share some facts about CSS units of measurements for Length units, Percentage units & Color units:

1. Length Units

<length> indicates a number followed by a unit of measure:24px.

The number can be an integer or a decimal fraction, and can be preceded by + or -.

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.

2. Percentage Units

<percentage> indicates a number followed by a % sign:50%.

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.

3. 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.

source:webmonkey.com

Related Posts :