Help
Looking for a friendly collection of commonly units used with CSS? This excerpt from Ben Henick's HTML & CSS: The Good Parts provides some of the more frequently encountered units associated with CSS.
While CSS supports a seemingly endless list of properties, the scheme for setting values is fairly predictable. Table 3.2 describes the most frequently used values.
Table 3.2. Commonly encountered CSS length/size, keyword, and color units
Unit | Type | Example |
|---|---|---|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| color (hexadecimal) |
|
| color (hexadecimal, reduced depth) |
|
There are three commonly used units in stylesheets intended for screen display:
px(pixels)Pixels are absolute units, equal to one pixel on the user’s screen display; always expressed as an integer.
em(ems)In digital typesetting environments (including CSS), an em is equivalent to the greatest possible height of a glyph (letter) in the applicable font and size combination. The contemporary definition contrasts with the historical definition: the width of a capital “M” in the font and size of the type to which it is applied as a measurement. This unit is usually expressed with a floating-point value.
%(percent)Percentage units are computed relative to some baseline measurement, which varies according to property and context. Floating-point percentage values are allowed.
The screen, handheld, and
projection media types all support the px
unit, but CSS provides no standard mechanism for defining display
pitch.
Since the pixel is the atomic unit of screen displays, all page elements must be computed in terms of pixels before rendering can take place. Because of this requirement, display pitch will determine the literal size of everything presented by the browser. The smaller the display pitch, the smaller everything will be when a page is rendered and displayed.
Table 3.3 shows the approximate arithmetic behind common display resolutions and pitches, as found on both contemporary backlit LCD and older CRT displays. Commonly encountered form factors are shown in bold.
Table 3.3. Commonly encountered screen display form factors, resolutions, and display pitches
Size (viewable) | Resolution | Aspect ratio | Width (mm) | Height (mm) | Pitch (mm) | px/in |
|---|---|---|---|---|---|---|
10.2″ | 1024×600 | ≈17:10 | 224 | 130 | 0.218 | 116 |
12″ (CRT) | 640×480 | 4:3 | 244 | 183 | 0.381 | 66 |
12″ | 1024×768 | 4:3 | 244 | 183 | 0.238 | 106 |
13″ | 1280×800 | 16:10 | 280 | 175 | 0.219 | 116 |
14″ (CRT) | 800×600 | 4:3 | 284 | 213 | 0.355 | 71 |
15″ | 1024×768 | 4:3 | 305 | 229 | 0.298 | 85 |
16″ (CRT) | 1024×768 | 4:3 | 325 | 245 | 0.318 | 80 |
17″ | 1280×1024 | 5:4 | 337 | 270 | 0.263 | 96 |
17″ | 1366×768 | ≈16:9 | 376 | 212 | 0.276 | 92 |
17″ | 1440×900 | 16:10 | 366 | 229 | 0.254 | 100 |
19″ | 1440×900 | 16:10 | 409 | 256 | 0.284 | 89 |
22″ | 1680×1050 | 16:10 | 474 | 296 | 0.282 | 90 |
23″ (CRT) | 1600×1200 | 4:3 | 447 | 335 | 0.279 | 91 |
As of this writing, two types of displays (19″, 1440×900; and 22″, 1680×1050) are particularly high sellers on Amazon.com (though both types are outsold by netbooks). Going by this table, the pitches of these two types of displays differ by only 2μm (less than 1%), averaging out at nearly 90 pixels per inch.
Considering that Windows assumes a display pitch of 96 pixels per inch for the purpose of displaying print documents onscreen, it would appear at first that stylists have little to worry about when it comes to predicting the literal size of their product on the screen display of the typical user.
In most cases, default assumptions offer few caveats to trouble the conscientious stylist. However, consider the fact that a pixel on a netbook contains less than two-thirds of the area of a pixel on one of the high-selling displays mentioned earlier. This means that the physical dimensions of a layout will decrease by one quarter on each axis when viewed on a netbook, as compared to the most popular types of desktop monitors.
The physically variable nature of pixels leads to a concept that every web developer would do well to keep in mind:
Designers who fail to account for the range of conditions under which their sites are visited will likely experience shock when exposed to their work in an unexpected setting. Stylists are among the reviewers who can prevent such surprises.
Chapter 1, Hypertext at the Core pointed out that unlike its predecessors, the Web is an unbounded medium. That lack of constraints applies not only to the Web’s domain of information, but also to its interface—when viewed on most hardware platforms, web documents can be scrolled, minimized, maximized, and otherwise manipulated within browser windows to the limits of the designer’s imagination and the visitor’s patience.
The print medium yields with greater ease to assumptions about environment, since readers of printed pages typically read from sheets of US Letter (8½″ × 11″) or ISO A4 paper, which are similar in size.
Print stylesheets can make good use of additional units, all of which can be specified in floating-point values:
ptType is traditionally measured in points; there are 72 in an inch. Expressed in Système International (SI) units, a point is roughly equivalent to 353 μm, yielding slightly less than 28.35 points per centimeter.
inOne inch is defined by international treaty as being equal to 2.54 cm. By way of comparison, a row of four hexagonal wooden pencils laid side by side and flush will measure nine-eighths of an inch (1.125″) across.
cmCentimeters. One sheet of A4 paper measures 21 cm × 29.7 cm.
This list is not comprehensive; additional units are described on
this book’s companion website.
Also, note that line-height values
can be specified with floating-point numbers and without a unit. In such
cases, a value of 1 is equivalent to
1em.
In situations where the priority of accessibility outweighs the need to express design
composites precisely, font-size
keywords can be used to surrender presentation control to the visitor.
The domain of font-size keywords
contains seven values, listed below from largest to
smallest:
xx-largex-largelargemedium(default)smallx-smallxx-small
font-size
CSS supports a three-channel (red, green, blue) color space with eight bits of color depth per channel. Such a space yields 16.7 million (224) possible colors.
Wherever there’s a need to reference a color, stylists have at their disposal three styles of notation:
rgb(r,g,b)Three channels, decimal; each channel takes a range of
0–255.#rrggbbThree channels, hexadecimal; each channel takes a range of
00–ff.#rgbThree channels, hexadecimal, reduced depth; each channel takes a range of
0–f. The equivalent color in full-depth notation is found by doubling each hexadecimal digit, so that#6cfand#66ccffare identical.
When creating stylesheets, it’s important to choose the most appropriate color notation and use it with ironbound consistency for the sake of stylesheet legibility. The advantages and disadvantages of each are described in Table 3.4.
Table 3.4. Advantages and disadvantages of the three styles of CSS color notation
Style | Advantages | Disadvantages |
|---|---|---|
Six-digit hex |
|
|
24-bit decimal |
|
|
Truncated hex |
|
|
HTML and CSS are the workhorses of web design, but using them together to build consistent, reliable web pages is difficult if you're relying on outdated, confusing, and unnecessary HTML hacks and workarounds. With this practical book, you'll learn how to work with these tools far more effectively than is standard practice for most web developers. You'll learn how to connect the underlying theory and design of HTML and CSS to your everyday work habits.
