CSS Properties
Font size
The CSS property font-size can be used to specify the size of the
font. The value of this property can be specified using any of the
length unit specification alternatives we discussed in a previous
lesson.
As briefly mentioned earlier, changing the font size of an element
affects other properties using relative length units as well. If, for
example, we are using the em unit to specify margin, changing the
font size will directly scale the margin of the element
proportionally.
Accessibility
We should aim to always define font sizes using relative length units
rather than the absolute px unit. Defining font sizes in px can
create problems for some users in certain web browsers that don't
allow them to increase the default HTML element font size.
Code example
h1 {font-size: 2.5rem;}
which essentially says that all <h1> elements' font size must be
2.5 times the font size of the root HTML element.
Read more on MDN
font-size
Test yourself
Description
Set the font size of the .quote footer element to 0.75em in order
to direct the users focus towards the main text first, and the
secondary author text afterwards.
All relevant rules have been defined for you. Add declarations where
appropriate. Try changing the font size of the parent container class
.quote and see how that affects the child elements.
Tests
- 1
Your
.quote footerelement should have a font size of0.75em.