Although revert and unset are similar, they differ for some properties for some elements.

So in the below example, we set custom font-weight, but then try to revert and unset it inline in the HTML document. The revert keyword will revert the text to bold because that is the default value for headers in most browsers. The unset keyword will keep the text normal because, as an inherited property, the font-weight would then inherit its value from the body.

HTML

<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>

CSS

h3 {
  font-weight: normal;
  color: blue;
}

Result

Reverting all values is useful in a situation where you've made several style changes and then you want to revert to the browser default values. So in the above example, instead of reverting font-weight and color separately, you could just revert all of them at once - by applying the revert keyword on all.

HTML

<h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults.</h3>
<p>Just some text</p>

CSS

h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}

Result

Reverting effectively removes the value for the element you select with some rule and this happens only for that element. To illustrate this, we will set a green color on a section and red color on a paragraph.

HTML

<section>
  <h3>This will be dark green</h3>
  <p>Text in paragraph will be red.</p>
  This will also be dark green.
</section>
<section class="with-revert">
  <h3>This will be black</h3>
  <p>Text in paragraph will be red.</p>
  This will also be black.
</section>

CSS

section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}

Notice how paragraph still has a red color even though a color property for the section was reverted. Also note that both the header and plain text node are black. This is exactly the same as if section { color: darkgreen } would not exist for the second section.

Result

• Use the initial keyword to set a property to its initial value.
• Use the inherit keyword to make an element's property the same as its parent.
• Use the revert-layer keyword to reset a property to the value established in a previous cascade layer.
• Use the unset keyword to set a property to its inherited value if it inherits or to its initial value if not.
• The all property lets you reset all properties to their initial, inherited, reverted, or unset state at once.