Creating Styles Using Property Values - CSS3 Foundations - page 59

You can apply percentages to many different types of properties: width , height , and font-size being just a
few.
You use more percentage values and add structural CSS in Chapter 6.
Units of Length
There are two types of unit of length: absolute and relative. Absolute units consist of physical units (inches, centi-
meters, millimeters, points, and picas) and pixel units. Relative units consist of ems, rems, and exs.
Absolute Units
Absolute units are fixed and don't relate to one another, meaning they aren't inherited. They can be a little tricky to
understand due to screens having different pixel densities (pixels are the tiny dots that make up a screen).
Physical Units
Physical units are anchored using the measurements of a device, assuming the pixel density of that device is 96dpi
(96 dots per inch/pixels per inch).
Sample usage of physical units:
width: 10in;
width: 25.4cm; /* 1 inch = 2.54cm */
width: 254mm;
width: 720pt; /* 1 inch = 72pt */
width: 60pc; /* 1pc = 12pt */
If a device has 96dpi and you declare the width of an element should be 1 inch, that element is 96px wide. The prob-
lem is, not all devices are 96dpi, and therefore, physical units are not particularly useful for the web. They are,
however, more useful for print stylesheets. You don't use physical units in CSS3 Foundations .
Pixel Units
Pixels are possibly the most common unit used for the web.
Sample usage:
width: 960px; /* 1px = 0.75pt */
Pixels are commonly relied on because they are easy to use, the downside being that you can't scale them in relation
to each other.
If a user requires that the contents of a page become bigger so he can better see it, many browsers nowadays have a
zoom feature that makes the whole page bigger. In this instance, the fact that pixels don't scale doesn't mat-
ter—because the page is zoomed and everything becomes bigger. In older browsers, this zoom feature isn't available,
but in its place is a text resize feature. Users of older browsers aren't able to utilize this feature if you choose to use
pixels. Furthermore, because you will want to change the size of text for mobile devices, using relative units called
ems makes it easier in the long run , allowing you to manipulate the overall scale with just one change to the CSS.
Relative Units
Relative units are those that relate to each other, being inherited from their parent element.