Units of Measurement and Color

Individual values in CSS NEVER have spaces in them. The only exception to this rule is in regard to regular font names like "Times New Roman" and "Courier New", which must be enclosed in quote marks.

There are three types of measurement units: percentage, absolute, and relative.

Percentage units are represented using integers and the percent (%) sign in the usual manner; negative values are also allowed (when applicable).



Absolute units include in (inches), cm (centimeters), mm (millimeters), pt (points; 1 point equals 1/72nd of an inch), and pc (picas; 1 pica equals 12 points).

Even though point sizes in fonts are actually relative to the size of the font itself (Times being smaller than Arial, for example, or Courier being larger than Garamond), a point is really an absolute unit of measurement. If you are NOT referring to a font, a point is an absolute value of 1/72nd of an inch.

With the absolute units, you may use any number to define your value, including numbers with decimal places and negative numbers.



Relative units include em (ems), ex (ex's), and px (pixels).

Pixels are considered to be relative units because monitors display pixels at different sizes. Despite this, pixels are an absolute quantity in CSS, because 1 pixel is 1/72nd of an inch as far as web pages are concerned.

Pixel values are always stated using integers.



"em" and "ex" are terms from the traditional print world, and are sizes based on a given font. An "ex" is the height of a lower-case letter "x". An "em", in traditional printing, is the width of an upper-case letter "M"; an "em" in CSS, however, is the HEIGHT of an upper-case letter "M".

You can define "em" and "ex" values using any number, including numbers with decimal places and negative numbers.



Synopsis of Measurement Unit Types

Percentage Values: 50%, 100%, etc.

Absolute Values: in, cm, mm, pt, pc

Relative Values: em, ex, px


You may use hex codes to define colors in CSS, as we have done in previous examples; I strongly recommend that you stick to web-safe color values (using digits 00, 33, 66, 99, CC, FF, as we have discussed in earlier modules).

Remember that hex codes must ALWAYS start with the pound (#) sign.



CSS also supports the named color values (white, black, blue, etc). Because the named color values are not all web-safe, however, I don't recommend that you use them.

Here's the list of 16 basic named colors, for reference: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua.

Main Menu