Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as em
in CSS.
Historically, the em represented the width of a capital letter M in the typeface and size being used. That is no longer the case.
Today, the em represents the font-size of the current element or the default base font-size set by the browser if none is given. For example, if the base font of a browser is 16 pixels (which is normally the default size of text in a browser), then 1 em is equal to 16 pixels. 2 ems would equal 32 pixels, and so on.
Let’s take a look at two examples that show how em can be used in CSS.
.heading { font-size: 2em; }
In the example above, no base font has been specified, therefore the font size of the heading
element will be set relative to the default font size of the browser. Assuming the default font size is 16 pixels, then the font size of the heading
element will be 32 pixels.
.splash-section { font-size: 18px; } .splash-section h1 { font-size: 1.5em; }
The example above shows how to use ems without relying on the default font size of the browser. Instead, a base font size (18px
) is defined for all text within the splash-section
element. The second CSS rule will set the font size of all h1
elements inside of splash-section
relative to the base font of splash-section
(18 pixels). The resulting font size of h1
elements will be 27 pixels.
Instructions
In style.css, set the font size in #banner h1
(“Bana’s Travel Blog”) to 1.5em
.
Set the font size in .post h2
(“Saturday Market”) to 1.75em
.
Set the font size in .post h3
to 1.25em
.
Set the font size in the footer (“© Bana’s Travel Blog”) to 0.75em
.