The second relative unit of measurement in CSS is the rem, coded as rem.
Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the root element. The root element is the <html> tag.
Most browsers set the font size of <html> to 16 pixels, so by default rem measurements will be compared to that value. To set a different font size for the root element, you can add a CSS rule.
In the example above, the font size of the root element, <html>, is set to 20 pixels. All subsequent rem measurements will now be compared to that value and the size of h1 elements in the example will be 40 pixels.
One advantage of using rems is that all elements are compared to the same font size value, making it easy to predict how large or small font will appear. If you are interested in sizing elements consistently across an entire website, the rem measurement is the best unit for the job. If you’re interested in sizing elements in comparison to other elements nearby, then the em unit would be better suited for the job.
Instructions
In style.css, add a new rule on line 3 that sets the font size of the root element to 16 pixels.
Let’s update the font sizes you set in the previous exercise to use rem instead of em.
First, change the font size in #banner h1 to 3.75rem.
Set the font size in .post h2 to 1.875rem.
Set the font size in .post h3 to 1.125rem.
Set the font size of the footer to 1.125rem.