Understanding CSS Initial, Unset, Revert, and Inherit

Initial

Resets a CSS property to the initial/default value as if no CSS rules had been written for that value.

Unset

Resets a CSS property to its inherited value, if it’s a property that can be inherited, and to the initial/default value otherwise. The difference between unset and initial is that initial will always reset to the default value, never to the inherited value, while unset will still allow for inheritance.

Revert

Resets a CSS property to the value it would have had if no changes had been made by the current style origin (the browser default styles, styles added by the user via a plugin, or CSS from the website). Like unset, it still allows for inheritance. The difference between revert and unset is that if a browser applies styles to an element, revert will keep them while unset will reset back to the initial value. For example, Firefox (like most browsers) adds a font-weight: bold rule to h2 elements. font-weight: revert on the element will undo any font-weight changes set by the stylesheet but keeps the bold styling from the browser. font-weight: initial also resets the browser’s user-agent styles, resulting in normal-weight headings.

Inherit

Resets a CSS property to the computed value of that property for its parent. The difference between initial and revert is that the element will still have styling applied, just whatever value its parent uses. The difference from unset is that it will allow for inheriting properties that aren’t usually inherited (e.g. border), while unset will reset those properties to the initial value;

References