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.
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.
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/) |