Basics of the CSS3 Units of Measure - dummies

Basics of the CSS3 Units of Measure

By John Paul Mueller

There are many ways to specify a value when working with CSS3. For example, you can simply say that the browser should use a large font (where medium is the default size). You can also tell the browser to compute a size based on the browser’s configuration.

Relative measurements make it possible for the browser to adjust the content presentation to match the size of the device displaying it, but using relative measurements also means that the user may not see the content as you originally wanted to present it.

In rare cases, using relative measurements can actually make the content unusable because the browser doesn’t know how to use the relative measurements to present the content correctly.

Absolute measurements have the advantage of allowing precise placement of content onscreen and making that content a specific size or giving the content a precise appearance. However, use absolute measurements only when you’re certain about the user’s configuration.

For example, you could use absolute measurements when creating an application that’s for internal use within your organization and the organization has mandated device configurations.

When creating absolute measurements, and some relative measurements, you need to use a unit of measure that the browser will understand. Here are the standardized units of measure that every browser will understand, along with a description of that measurement:

Symbol Measurement Type Description
% Percent Relative A percentage of a particular element. For example, a table
column can consume a percentage of the space allocated for the
entire table’s width.
in Inch Absolute The number of screen or printed inches to use to display an
element. The number of pixels in an inch varies according to device
and device configuration.
cm Centimeter Absolute The number of screen or printed centimeters to use to display
an element. The number of pixels in an centimeter varies according
to device and device configuration.
mm Millimeter Absolute The number of screen or printed millimeters to use to display
an element. The number of pixels in an millimeter varies according
to device and device configuration.
em Em Relative An em is computed based on the current font size. The default
size for most desktop browsers is 16 px = 1 em. However, someone
might configure the browser to use a smaller or larger default
font.
ex Ex Relative A counterpart to the em, the ex is the computed x-height of a
font, rather than the full height of the font. Otherwise exs work
the same as ems.
pt Point Absolute Each point is approximately 1/72-inch.
pc Pica Absolute Each pica is equal to twelve points.
px Pixel Relative Specifies an individual dot on the screen. This is a relative
measurement because it takes into account the variable number of
pixels used by each device over a specific measurement (normally an
inch or centimeter). Many developers use pixels when good
presentation control is needed, but some flexibility in adapting to
a particular platform is desired.