News Outline Schedule Tutorials Project Tools Links

Measurements and Units in Stylesheets

Many stylesheet properties require a numeric value of some sort, for font sizes, widths, or placement on the screen. Any time such a measurement is to be given, it is required that a unit be provided as part of the measurement. There are only three exceptions to this rule:

There are many different units to be used in stylesheets, both "absolute" and "relative" - it should be noted that the so called "absolute" units are based on how large your computer thinks the screen of your monitor is, and if you go from a 14" screen to a 17" screen, your inches may change as well. The "relative" units are more reliable across variable screen sizes, because they are not dependant on accurate hardware and software settings. (Remember, just because your computer is set up properly, does not mean that your customer's computer is. If your site looks good on your computer, but bad on theirs, you won't make money.) Below is a list of the different units, and their meanings:

"Absolute" Units
pt points, 1 point = 1/72 of an inch. This should only be used for font sizes.
pc picas, 1 pica = 12 points. This should also only be used for font sizes.
mm millimeters
cm centimeters
in inches (1 inch = 2.54cm)
"Relative" Units
px pixels
ex the 'x-height' of the relevant font (the height of a lowercase "x" in the font)
em the font-size of the relevant font (the height of a capital "M" in the font)
%Percentages are a special case, see below.

The % unit refers to different things, based on which stylesheet property it is used on. For example, in the case of the font-size property, it is relative to the size that the font would have been already. (Thus, 200% is double size, and 50% is half sized, while setting the font size to 50% inside of an area that already has 200% set on it would make the font show up in it's original size.) In the case of the width property (such as the width of a table) the % refers to the width of the "container" which the table is inside of. (If the table is inside of another table's cell, it refers to the width of that table cell - if the table is not in anything, it refers to the width of the whole screen.) With placement properties such as top and left, it refers to the distance across or down the screen (or page) that the position should be.