<section class="primary">
  <p>Hello world</p>
</section>
<section class="success">
  <p>Hello world</p>
</section>
<section class="danger">
  <p>Hello world</p>
</section>
.primary {
  --color: blue;
}

.success {
  --color: green;
}

.danger {
  --color: red;
}

p {
  color: var(--color);
  text-align: center;
}

section {
  border: 1px solid var(--color);
  margin: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.