Specifying Values

It is important to use the proper syntax for specifying length and color values in style sheet rules.

Length Units

Table 23.1 lists units of measurements that can be specified in style sheet values.

Table 23-1. Units of Measurements for Style Sheet Values

Code

Unit

Description

px

Pixel

Pixel units are relative to the monitor resolution.

pt

Point

A traditional publishing unit of measurement for type. There are approximately 72 points in an inch.

pc

Pica

A traditional publishing unit of measurement equal to 12 points (or 1/6 of an inch).

em

Em

A relative unit of measurement that traditionally equals the width of the capital letter M in the current font. In practical terms, it is equal to the point size of the font(e.g., an em space in 24pt type is 24 points long).

ex

Ex

A relative unit of measurement which is the height of the letter “x” for that font (approximately half the length of an Em).

in

Inches

Standard unit of measurement in the U.S.

mm

Millimeters

Metric measurement.

cm

Centimeters

Metric measurement.

Some values can be specified as percentages that are relative to the font size or bounding box of the element. The following example makes the line height 120% of the element’s font size:

P { line-height: 120% }

Specifying Color

As in HTML tags, there are two methods for specifying color in style sheets: by name and by numerical values.

By name

You can specify color values by name as follows:

H1 { color: olive } ...

Get Web Design in a Nutshell 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.