<p class="box">
  Box.
</p>

<p class="box box--inherit">
  <em>Inherited</em> box.
</p>

<p class="box box--initial">
  <em>Initial</em> box.
</p>

<p class="box box--unset">
  <em>Unset</em> box.
</p>

<p class="box box--revert">
  <em>Revert</em> box. <small>(Safari only)</small>
</p>
body {
  color: green;
  border: 1px solid green;
}

.box { 
  color: red;
}

.box--inherit {
  all: inherit;
}

.box--initial {
  all: initial;
}

.box--unset {
  all: unset;
}

.box--revert {
  all: revert;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.