<div class="container">
  <p>
    Text is blue because it inherits from :root.
  </p>
  <div>
    Text is green because it was explicitly set.
  </div>
  <div class="highlight">
    Text is red because it was also explicitly set.
    <p>
      Text is also red because of inheritance.
    </p>
  </div>
</div>

body {
  background-color: #f5f5f5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

:root {
  --color: blue;
}

.container div {
  --color: green;
}

.container .highlight {
  --color: red;
}

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