Units of Measure

One of the most confusing aspects of CSS is the unit of measure it provides. Four types of units can be specified in CSS: length units, percentage units, color units, and URLs. In this lesson, we're going to deal mostly with length and percentage units.

There are two kinds of length units: absolute and relative. Absolute units theoretically correspond to a unit of measure in the real world, such as an inch, a centimeter, or a point. Relative units are based on some more arbitrary unit of measure. Table 9.1 contains a full list of length units.

Table 9.1. Length Units in CSS

Unit	Measurement
em	Relative; height of the element's font
ex	Relative; height of x character in the element's font
px	Relative; pixels
in	Absolute; inches
cm	Absolute; centimeters
mm	Absolute; millimeters
pt	Absolute; points
pc	Absolute; picas

The absolute measurements seem great, except that an inch isn't really an inch when it comes to measuring things on a screen. Given the variety of browser sizes and resolutions supported, the browser doesn't really know how to figure out what an inch is. For example, you might have a laptop with a 14.1" display running at 1024 by 768. I might have a 19" CRT running at that same resolution. If the browser thinks that one inch is 72 pixels, a headline set to 1in may appear as less than an inch on your monitor or more than an inch on mine. Dealing with relative units is much safer.

In this lesson, I'm going to use one length unit: px. It's my favorite for sizing most things. However, other relative units can also be useful. For example, if you want paragraphs on your page to appear as double spaced, you can specify them like this:

p { line-height: 2em; }

Percentage units are also extremely common. They're written as you'd expect: 200% (with no spaces). The thing to remember with percentages is that they're always relative to something. If you set a font size to 200%, it will be double the size of the font that's currently being used. If you set a <div>'s width to 50%, it will be half as wide as the enclosing element (or the browser window, if there's no enclosing element). When you use percentages, always keep in mind what you're talking about a percent of.

Using Percentage Units

When you use percentages as units, bear in mind that the percentage applies not to the size of the page, but rather to the size of the box that encloses the box to which the style applies. For example, if you have a <div> with its width set to 50% inside a div with its width set to 500px, the inner <div> will be 250 pixels wide. On the other hand, if the outer <div> were also set to 50%, it would be half as wide as the browser window, and the inner <div> would be 25% of the width of the browser window.

I already discussed units of color back in Lesson 7, "Adding Images, Color, and Backgrounds," so I'll move on to URLs. Most of the time, when you use URLs, they're used in the <a> tag or <img> tag. In CSS, they're usually included to specify the location of a background image or a bullet image for a list. Generally, URLs are specified like this:

url(http://www.example.com/)