<div>
  <p>blue paragraph.</p>
  <div class="alert">
    <p>red paragraph.</p>
  </div>
</div>
:root {
  --main-color: blue;
}

.alert {
  --main-color: red;
}

p {
  color: var(--main-color);
  text-align: center;
  font-size: 2em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.