HTML & CSS Interview Question #64

What are the initial, inherit, unset, revert, and revert-layer keywords?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

initial sets a property to its CSS-defined initial value. inherit uses the computed value from the parent. unset behaves like inherit for naturally inherited properties and like initial for non-inherited properties.

Detailed Explanation

initial sets a property to its CSS-defined initial value. inherit uses the computed value from the parent. unset behaves like inherit for naturally inherited properties and like initial for non-inherited properties.

revert rolls a property back according to an earlier cascade origin or context, while revert-layer rolls it back to what would have won outside the current cascade layer. These keywords are useful when building resets, components, and layered style systems.

Code Example

.component {
    color: inherit;
}

.reset-margin {
    margin: initial;
}

.link {
    text-decoration: revert;
}

/* In a layered stylesheet: */
.special {
    color: revert-layer;
}