HTML and CSS Reference
In-Depth Information
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
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
Search WWH ::
Custom Search