<p>I'm green because got my color from root</p>

<div>I got blue from div selector</div>

<div class="error">
    I'm red because the .error.
    <p>Another red here because inheritance!</p>
</div>
:root { --text-color: green; }

div { --text-color: blue; }

.error { --text-color: red; }

* {
  color: var(--text-color);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.