How does inheritance work in CSS? Explain inherit, initial, unset and revert.

Some properties are inherited. If no rule sets them on an element, the element takes its parent's computed value. The computed value is the final value the browser worked out for the parent.

• Text properties inherit, such as color, font-family, line-height and visibility.
• Box properties do not inherit, such as margin, border, width and background. They fall back to their initial value.

Four keywords control this:

• inherit forces the parent's value, even for properties that don't normally inherit.
• initial uses the property's initial value from the CSS spec. This can surprise you: display: initial is inline, not block.
• unset acts like inherit for inherited properties, and like initial for the rest.
• revert goes back to the value the previous origin would give. An origin is a source of styles, and the previous one is usually the browser's default stylesheet. So display: revert on a div gives block.

There is also revert-layer, which goes back to the previous cascade layer.