HTML and CSS Reference
In-Depth Information
Working with Relative Units
Whilst relative units are very much a part of styling the modern web, they can be a little difficult to work with due to
the fact they relate to each other. When specifying a
font-size
should be 1em, what exactly does that mean?
How long is a piece of string?
When specifying a relative unit or percentage, the browser will take that value and run some calculations based on
other values. This is known as the
computed value
.
Say an element has a width of 500px, and you specify its child element should be 50% wide, the browser will do
the calculation: 250px = 500px × 0.5.
When a page consists of lots of elements, these calculations can be difficult for the person styling the page to keep
up with.
Using the web developer tools of a browser, you can find the calculated value of any element:
1.
Open your browsers web developer tools as described in Chapter 1.
a. The Element Inspector in all web developer tools consists of two panes: the
Document Object Model
(DOM) and the properties. The larger pane on the left (by default) is the DOM, which consists of the
rendered HTML in a tree view. The smaller pane on the right (by default) is the properties, which consists
of
noncomputed
and
computed styles,
and you may find your browser has other features too, which
CSS3
Foundations
doesn't cover.
b. Noncomputed styles are those that have been taken directly from your stylesheet. Computed styles are
those that the browser has calculated based on the relative and percentage units in your stylesheet. To
see an example of these computed styles:
2.
Navigate through the DOM by clicking the + or triangle symbols to open parent elements that contain the
<h1>.
3.
Once you've found it, click the <h1> element.
4.
In the right-hand pane, click Computed or Computed Style (browser dependent).
Here you can see all of the computed styles applied to this element. There are quite a lot of them because this in-
cludes styles inherited from the user agent stylesheet described in Chapter 2. None of these properties are relative
units or percentages because they have all been computed. Knowing the computed style often makes doing your
own calculations easier.
Em
The W3C defines an
em
unit as “the computed value of the
font-size
property of the element on which it is
used.” Not particularly straightforward, is it? Use an em unit as follows to better understand it:
1.
In styles.css, add the following to the
body
selector:
font-size: 1em;
2.
Save styles.css.
If you view the page now, you notice nothing has changed! The default font size of the
<html>
element is 16px,
and because font size is inherited, the font size of the body is also 16px. By declaring a font size of
1em
, you tell the
browser you want the font size to be 16px (16px = inherited value (16px) × 1em). Ems get slightly trickier when font
sizes are inherited.
