CSS: working with units
In CSS absolute and relative units are used to specify dimensions of various elements. Absolute units don’t depend on the output environment, and relative units denote dimensions relative to other elements.
Relative units
Relative units are typically used for text, or when you need to calculate the relative percentage of the elements. Table 1 contains a list of the main relative units.
Table 1. Relative units of measurement.
| Unit | Description |
|---|---|
| em | Fort size of the current element |
| ex | x size (lowercase size or half size) |
| px | Pixels |
| % | Percent |
The changing value depends on the font size of the current element (set via style attribute font-size). Each browser has a default text size used in case if the size is not specified. Initially 1em is the browser’s default size. Accordingly, if we set the size of the text for each page in em’s, we should work with this parameter. If em is used for a specific element, 1em is accepted as the parent font size.
The argument ex denotes the height of the symbol "x" in the lower case. Argument ex is subject to the same rules as em, that is, it relates to the browser default fort size or to the font size of the parent element.
A pixel is a basic point, displayed on monitors or similar devices, such as smartphones. Pixel size depends on the resolution of the device and its specifications.
Example 1 shows the use of these units.
Example 1. Using relative units.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.em, .ex, .px, .percent { font-family: Verdana, Arial, sans-serif; }
.em { font-size: 2em; }
.ex { font-size: 2ex; }
.px { font-size: 30px; }
.percent { font-size: 200%;}
</style>
</head>
<body>
<span class="em">Size in em</span>
<span class="ex">Size in ex</span>
<span class="px">Size in pixels</span>
<span class="percent">Size in percent</span>
</body>
</html>The result of the example is shown below.
Size in ex
Size in pixels
Size in percent
Absolute unit
Absolute units are used less frequently than relative, and in most cases when working with text. Table 2 lists some of these units.
Table 2. Absolute units.
| Unit | Description |
|---|---|
| in | Inch (1 inch equals 2,54 cm) |
| cm | Centimeter |
| mm | Millimeter |
| pt | Point (1 point equals 1/72 inch) |
| pc | Pica (1 pica equals 12 points) |
Probably, the most commonly used unit to denote font size is a point. Many people are used to specify font size in word processors with, for example, 12. But what the number means, they don’t know. That’s what they are, points. A point is, perhaps, the only measuring unit used in both metric and in non-metric system countries. And all thanks to word processing programs and publishers. Example 2 shows the use of points and other units.
Example 2. Using absolute units.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.in, .mm, .pt { font-family: Verdana, Arial, sans-serif; }
.in { font-size: 0.5in; }
.mm { font-size: 8mm; }
.pt { font-size: 24pt; }
</style>
</head>
<body>
<span class="in">Size in inches</span>
<span class="mm">Size in millimeters</span>
<span class="pt">Size in points</span>
</body>
</html>The result of using absolute units is shown below.
Size in millimeters
Size in points
