Getting to Know CSS - Learn to Code HTML and CSS: Develop and Style Websites - page 49

Percentages are extremely helpful for setting the height and width of elements and building
out a web page's layout. We're going to rely on them often to help us out in these areas.
Em
The em unit is also a very popular relative value. The em unit is represented by the em unit
notation, and its length is calculated based on an element's font size.
A single em unit is equivalent to an element's font size. So, for example, if an element has
a font size of 14 pixels and a width set to 5em , the width would equal 70 pixels ( 14
pixels multiplied by 5).
1. .banner {
2. font-size: 14px ;
3. width: 5em ;
4. }
When a font size is not explicitly stated for an element, the em unit will be relative to the
font size of the closest parent element with a stated font size.
The em unit is often used for styling text, including font sizes, as well as spacing around
text, including margins and paddings. We'll explore text a bit more in Lesson 6 , “ Working
with Typography . ”
There are a lot more absolute and relative units of measurement than those mentioned here.
However, these three—pixels, percentages, and em units—are the most popular and the
ones we're going to primarily use.
Summary
Sadly our Styles Conference website lay dormant this lesson. We focused on the founda-
tions of CSS, covering exactly how it works and some common values we're sure to use.
To briefly recap, within this lesson we've discussed the following:
• How style sheets cascade from the top to the bottom of a file
• What specificity is and how we can calculate it
• How to combine selectors to target specific elements or groups of elements
• How to use multiple classes on a single element to layer on different styles for
more modular code
• The different color values available to use within CSS, including keyword, hexa-
decimal, RGB, and HSL values
• The different length values available to use within CSS, including pixels, percent-
ages, and em units