The auto CSS keyword value tells the browser to automatically compute the CSS property's value, and it looks like this:

margin: auto;

The term auto is short for automatic. It's not the same as saying 100% because 100% is an actual defined value; auto is calculated by the browser.

One of the most common locations to see the keyword auto applied is when centering an element horizontally with the margin CSS property.

CSS:

.element {
  margin: auto;
}

The inherit CSS keyword value makes an element derive/inherit the values of its parent container.

CSS:

/*All <h1>'s are red*/
h1 { color: red; }
/*All text in .element is blue*/
.element { color: blue; }
/*Make all <h1>'s inside .element blue*/
.element h1 { color: inherit; }

The initial CSS keyword value sets the CSS property to its default value as per the CSS spec.

CSS:

/*All <h1>'s are red*/
h1 { color: red; }
/*Set the color of all <h1>'s inside .element to the default (black)*/
.element h1 { color: initial; }

The none CSS keyword value defines the lack of a specific styling.

CSS:

.element {
  border: none;
}

The normal CSS keyword value defines a standard value.

CSS:

.element {
  font-weight: normal;
}

The unset CSS keyword is the combination of the inherit and initial keywords, and it looks like this:

color: unset;

By combining the inherit and initial keywords, the unset CSS keyword value resets the value of a property.

If an element is inheriting values from its parent container and the unset keyword is declared, then the property's value is reset to the parent container's value (since it's inheriting). But if an element has no parent container and the unset keyword is declared, then its property's value is reset to the default value as per the spec (since it's not inheriting).

CSS:

/*All <h1>'s are set to the default color per the spec*/
h1 { color: unset; }
/*All <h1>'s are set to the default color of the parent*/
.element { color: green; }
.element h1 { color: unset; }

The revert CSS keyword value is like an undo in CSS as it returns the cascade to a previous state and resets the property to the default value defined by the user agent. It looks like this:

display: revert;

This is different from the initial CSS keyword because revert rolls back the cascade and resets the value as per the user agent's style sheet value. With initial the value is reset to its default value as per the specification.

For example, the spec says that the default value of display is inline. However, most UAs assign a default value of display: block; to <div>, or display: table; to <table>.

CSS:

/*Default value per the spec*/
display: inline;
/*Default value per the UA style sheet*/
div { display: block; }
/*Style defined by the developer/designer*/
.element { display: inline-block; }
/*Style sheet is rolled back and DIV behaves as display: block;*/
div.element { display: revert; }