<style>
body {
    font-size: 18px;
}

main {
    font-size: 80%;
}

main > p {
    /* No styles specified */
}
</style>

This is text directly in <code>&lt;body></code>. <br><code>getComputedStyle(document.querySelector('body')).fontSize</code> returns 18px.

<main>
  This is text inside <code>&lt;main></code>. <code><br>getComputedStyle(document.querySelector('main')).fontSize</code> returns 14.4px.
  
  <p>This is text inside of <code>&lt;p></code>, a child of <code>&lt;main></code>.<br><code>getComputedStyle(document.querySelector('p')).fontSize</code> returns 14.4px.</p>
</main>
main {
  padding-top: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.