<div>default</div>
<div class="different">different</div>
<div class="invalid">invalid</div>
@property --height {
  syntax: "<length>";
  inherits: true;
  initial-value: 80px;
}

@property --color {
  syntax: "<color>";
  inherits: true;
  initial-value: blue;
}

div {
  width: 100%;
  height: var(--height);
  background: var(--color);
  margin-bottom: 1rem;
  color: white;
}

body {
  --color: rebeccapurple;
}

.different {
  --color: red;
  --height: 40px;
}

.invalid {
  --color: initial;
  --height: 20%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.