HTML & CSS: The Good Parts

CSS Units

While CSS supports a seemingly endless list of properties, the scheme for setting values is fairly predictable. Table 3-2 describes the most frequently used values.

Table 3-2. Commonly encountered CSS length/size, keyword, and color units

Unit	Type	Example
px (pixels)	length	width: 744px;
em (ems)	length	margin-left; 1.25em;
% (percent)	length	left: 34%;
pt (points)	length	font-size: 12pt;
in (inches)	length	margin-top: .75in;
cm (centimeters)	length	margin-top: 1.905cm;
xx-small ... xx-large	font size	font-size: large;
rgb(r,g,b)	color (decimal)	background-color: rgb(221,204,187);
#rrggbb	color (hexadecimal)	background-color: #ddccbb;
#rgb	color (hexadecimal, reduced depth)	background-color: #dcb;

Cross-Media Length and Size Units

There are three commonly used units in stylesheets intended for screen display:

px (pixels)

Pixels are absolute units, equal to one pixel on the user’s screen display; always expressed as an integer.

em (ems)

In digital typesetting environments (including CSS), an em is equivalent to the greatest possible height of a glyph (letter) in the applicable font and size combination. The contemporary definition contrasts with the historical definition: the width of a capital “M” in the font and size of the type to which it is applied as a measurement. This unit is usually expressed with a floating-point value.

% (percent)

Percentage units are computed relative to some baseline measurement, which varies according to property and context. Floating-point percentage values are allowed.

em and