Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

13.2. Property Values

Throughout this chapter, you will see how to apply values to properties using CSS. First, it is important to talk a bit about the values themselves. Property values can be expressed in several different metrics according to the individual property and the desired result.

CSS supports the following metrics for property values:

• CSS keywords and other properties, such as thin, thick, transparent, ridge, and so forth

• Real-world measures

  • Inches (in)

  • Centimeters (cm)

  • Millimeters (mm)

  • Points (pt)—The points used by CSS2 are equal to 1/72 of an inch

  • Picas (pc)−1 pica is equal to 12 points

• Screen measures in pixels (px)

• Relational to font size (font size (em) or x-height size (ex))

• Percentages (%)

• Color codes (#rrggbb or rgb(r,g,b))

• Angles

  • Degrees (deg)

  • Grads (grad)

  • Radians (rad)

• Time values (seconds (s) and milliseconds (ms))—Used with aural style sheets

• Frequencies (hertz (Hz) and kilohertz (kHz))—Used with aural style sheets

• Textual strings

Which metric is used depends on the value you are setting and your desired effect. For example, it doesn't make sense to use real-world measures (inches, centimeters, and so on) unless the user agent is calibrated to use such measures or your document is meant to be printed. The em unit can be quite powerful, allowing a value that changes as the element sizes change. However, using the em unit can have unpredictable results. The em metric is best used when you need a relational, not absolute, value.

In the case of relational property values ...