<div id="id" class="class">Hello</div>
div {
  /*
    `!important` overrules the
    other `--color` definitions
  */
  --color: red !important;
  color: var(--color);
}

.class {
  --color: blue;
}

#id {
  --color: yellow;
}

/* PRESENTATIONAL STYLES */
body {
  background: #333;
  display: grid;
  font-size: 50px;
  height: 100vh;
  place-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.