O'Reilly logo

HTML & CSS: The Good Parts by Ben Henick

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required