CodePen Embed - Computed font-size (rem)

<style>
html {
    font-size: 1.2em;
}

main {
    font-size: 1.5rem;
}

div {
    font-size: 1.7rem;
}
</style> 

<main>This is a text node, a direct descendant of the <code>&lt;main></code> element. It inherits the styles specified for its direct parent, as well as defaults that cascade down from <code>&lt;body></code> and <code>&lt;html></code>. Font size is 1.5rem. This computes to 28.8px.</p>
 </main>


<div>This is a div outside of <code>&lt;main></code> with a font-size of 1.7rem. This computes to 32.64px.</div>

This Pen is owned by Jemimah O. on CodePen.

See more by @Wryhder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.