<header class="header">
  <h1 class="title">Lorem ipsum</h1>
</header>

<div class="content">
  <p>Dolor sit amet <a href="#">dummy link</a></p>
</div>

<footer class="footer">
  <p class="disclaimer">Volupat consecturap</p>
</footer>
html {
  --primary-color: blue;
  --secondary-color: red;
}

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

.header, .footer {
  --text-color: white;
  background: var(--primary-color);
}

.title {
  color: var(--secondary-color);
}

a {
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.