In CSS, inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element. For the root element, which has no parent element, the inherited value is the initial value of the property.
The great thing about inheritance is that you can establish the basis for a consistent visual design with very little code. And these styles will even apply to HTML you have yet to write.
Which properties are inherited by default and which aren’t is largely down to common sense, check out this exhaustive list. Common inherited properties are
According to how CSS works to compute final value of a CSS property for a given element, inheritance happens at defaulting phase right after cascading.
1. Collecting 2. Cascading 3. Defaulting 4. Resolving 5. Formatting 6. Transforming
The defaulting step comes in to place when there are no declarations try to set value for a CSS property of an element. There are several ways of defaulting:
inheritfor explicit inheritance and
unsetfor erasing all declarations.
CSS provides four special universal property values for controlling inheritance. Every CSS property accepts these values.
inherit: take the computed value of the property from its parent element.
initial: applies the initial (or default) value of a property to an element.
unset: resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
revert: reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.
The CSS shorthand property
all can be used to apply one of these inheritance values to (almost) all properties at once. Its value can be any one of the inheritance values above. It’s a convenient way to undo changes made to styles so that you can get back to a known starting point before beginning new changes.