A page-wide font should not need a rule for every element. Set `font-family` on `body`, and descendants without their own cascaded value inherit it. Inheritance passes a value down the DOM tree; the cascade determines whether an element already has a value that takes precedence. section 1.2
Check the property before relying on inheritance:
- Text properties such as `color`, `font-family`, and `line-height` normally inherit. Some list and table-border properties do too. section 1.2
- A cascaded value on a descendant overrides what it would inherit. Inheritance can resume farther down the tree, unless another cascaded value intervenes. section 1.2
- Do not expect an ordinary border or padding value to spread to descendants. Use `inherit` explicitly if you need to force a property to take its parent’s value. section 1.2 section 1.3.1
Make a footer link follow its surroundings
Suppose a footer has gray text but a page-wide link rule gives its links another color. Set `.footer { color: #666; }` and `.footer a { color: inherit; }`. The link now takes its parent’s color, even though it has a cascaded declaration of its own. If the footer color changes, the link follows it. section 1.3.1
Listing 1.15 The inherit value
.footer {
color: #666; #1
background-color: #ccc;
padding: 15px 0;
text-align: center;
font-size: 14px;
}
.footer a {
color: inherit; #2
background-color: transparent; #3
text-decoration: underline;
}
Compare the footer’s color with the link’s `color: inherit`: the link is deliberately tied to its parent rather than to a second gray value. section 1.3.1
For a reset that depends on the property, `unset` behaves like `inherit` on an inherited property and like `initial` on a noninherited one. In the footer, it can restore inherited link color and the initial transparent background. It does not restore an underline when that requires `text-decoration: underline`. section 1.3.3
If an expected font value does not carry through, inspect the descendant’s declarations. A `font` shorthand sets omitted components too: `font: 32px Helvetica, Arial, sans-serif` sets `font-weight` to `normal`, which can defeat a bold rule or an inherited weight. Browser DevTools can help trace inherited values and overrides. section 1.4.1 section 1.2
Custom properties also cascade and inherit. Define colors at `:root`, then redefine them on a dark container: a panel using those variables resolves to different colors inside the container without needing a separate panel class. section 2.6.1
