HTML and CSS Reference
In-Depth Information
Absolute Lengths
Absolute length values are the simplest length values, as they are fixed to a physical meas-
urement, such as inches, centimeters, or millimeters. The most popular absolute unit of
measurement is known as the pixel and is represented by the px unit notation.
Pixels
The pixel is equal to 1/96th of an inch; thus there are 96 pixels in an inch. The exact meas-
urement of a pixel, however, may vary slightly between high-density and low-density view-
ing devices.
Pixels have been around for quite some time and are commonly used with a handful of dif-
ferent properties. The code here is using pixels to set the font size of all paragraphs to 14
pixels.
1.
p {
2.
font-size:
14px
;
3.
}
With the changing landscape of viewing devices and their varying screen sizes, pixels have
lost some of their popularity. As an absolute unit of measurement, they don't provide too
much flexibility. Pixels are, however, trustworthy and great for getting started. We're going
to lean on them quite a bit as we're learning the ropes of HTML and CSS.
Relative Lengths
In addition to absolute length values, there are also relative length values. Relative length
values are a little more complicated, as they are not fixed units of measurement; they rely
on the length of another measurement.
Percentages
Percentages, represented by the % unit notation, are one of the most popular relative values.
Percentage lengths are defined in relation to the length of another object. For example, to
set the width of an element to
50%
, we have to know the width of its parent element, the
element it is nested within, and then identify
50%
of the parent element's width.
1.
.col {
2.
width:
50%
;
3.
}
Here we've set the width of the element with the class attribute value of
col
to
50%
. That
50%
will be calculated relative to the width of the element's parent.
Search WWH ::
Custom Search