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

Get HTML & CSS: The Good Parts now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.