CSS Tutorial – 11 – Units

No comments Admin

When it comes to specifying the size of a property’s value there are several units to choose from.

Absolute units

The absolute units of length – centimeter (cm), millimeter (mm), and inches (in) – look the same at any screen resolution.

<span style="font-size: 1cm;">cm</span>
<span style="font-size: 1mm;">millimeter</span>
<span style="font-size: 1in;">in</span>

Relative units

The relative units of length are pixels (px) and percentage (%). Percentage is relative to the current value of the property where the rule is applied.

<span style="font-size: 1px;">pixel</span>
<span style="font-size: 100%;">percent</span>

Typographical units

Points (pt) and picas (pc) are two typographical units. By definition, there are 72 points to an inch and 12 points to one pica.

<span style="font-size: 1pt;">point</span>
<span style="font-size: 1pc;">pica</span>

Em-height (em) and ex-height (ex) are two more typographical measures. Em-height is the same as the font-size and ex-height is about half the font-size.

<span style="font-size: 1ex;">ex-height</span>
<span style="font-size: 1em;">em-height</span>

Unit values

It’s possible to set length using decimals. Some properties even allow negative values for length.

p { font-size: 0.394in; }
p { margin: -1px; }

Another thing to note is that a rule won’t work if there is a space before the unit or if no unit is specified – except for the value zero, which must not have a unit after it. Whenever a CSS declaration contains an error it will be ignored by the browser.

p { font-size: 1ex; }  /* correct */
p { font-size: 0; }    /* correct */
p { font-size: 1 ex; } /* invalid */
p { font-size: 1; }    /* invalid */
p { font-size: 0ex; }  /* invalid */