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

main > p {
    font-size: 1.5em;
}
</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.2em.

   <p>This is a paragraph with a style override. It is a direct child of <code>&lt;main></code>. Font size is 1.5em.
</p>

   <p>Starting with a default font-size value of 16px (and this is <a href="https://stackoverflow.com/questions/29511983/is-the-default-font-size-of-every-browser-16px-why">subject to  variation</a>), we arrive at a pixel-absolute value of 28.8px for this paragraph and the one before it. Try this out and see what your browser computes.</p>

 </main>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.