Frontend Development 29 min read

Master CSS Cascading, Inheritance, and Specificity to Write Cleaner Styles

This article explains the three core CSS concepts—cascading, inheritance, and specificity—detailing how browsers resolve conflicting rules, the role of importance and source, selector weight calculations, the impact of rule order, and the use of keywords like !important, initial, inherit, revert, unset, and @layer to control styling.

ByteFE

Jan 29, 2024

Master CSS Cascading, Inheritance, and Specificity to Write Cleaner Styles

Cascade, Inheritance, and Specificity in CSS

CSS is a W3C‑defined language for styling structured documents such as HTML and XML. The three fundamental concepts that determine which rule finally applies to an element are cascading , inheritance , and selector specificity . This summary focuses on cascading, inheritance, and the mechanisms that control them.

Cascade Definition

The cascade is the algorithm browsers use to decide which CSS declaration wins for a given property on a given element. It collects all declared values, sorts them by precedence, and outputs a single cascaded value.

The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence, and outputs a single cascaded value.

Source and importance

Selector specificity

Order of appearance

Initial and inherited values

Source and Importance

CSS rules originate from three sources, listed by decreasing priority:

Author : Styles written by the developer in the HTML document.

User : User‑defined styles, often used for accessibility overrides.

User‑agent : Browser default styles (e.g., the default input appearance).

Author rules normally outrank user rules, which outrank user‑agent rules. The !important keyword forces a rule to the top of the cascade, which is why its overuse is discouraged.

Selector Specificity

If importance and source are equal, the browser calculates a selector’s weight using four components (a‑b‑c‑d):

a = inline style (1 if present, otherwise 0)

b = number of ID selectors

c = number of class, attribute, and pseudo‑class selectors

d = number of element and pseudo‑element selectors

{}
li { /* 0,0,0,1 */ }
li:first-line { /* 0,0,0,2 */ }
ul li { /* 0,0,0,2 */ }
ul ol+li { /* 0,0,0,3 */ }
h1 + [rel=up] { /* 0,0,1,1 */ }
ul ol li.red { /* 0,0,1,3 */ }
li.red.level { /* 0,0,2,1 */ }
#x34y { /* 0,1,0,0 */ }
[style=""] { /* 1,0,0,0 */ }

Order of Appearance

When two selectors have identical specificity, the rule that appears later in the source order wins. Therefore, the order in which stylesheets are linked inside the <head> matters.

Initial and Inherited Values

Each property has an initial value defined by the specification and an inherited flag indicating whether the property is inherited by default. If an element has no specified value for an inherited property, it takes the computed value from its parent; otherwise it falls back to its initial value.

html { font-size: small; }
/* The <code>font-size</code> on <code>html</code> is inherited by all descendants. */

Properties such as border are not inherited ( Inherited: no ), while font-size is ( Inherited: yes ).

Handling CSS Inheritance

Four keywords control inheritance explicitly: initial: Resets the property to its specification‑defined initial value. inherit: Forces the property to take the computed value of its parent. revert: Restores the property to the value it would have had without author styles (i.e., user‑agent or user styles). unset: Acts as inherit for inherited properties and initial for non‑inherited properties.

The shorthand all can reset multiple properties at once. Its three possible values are initial, inherit, and unset, each affecting all properties except unicode-bidi and direction.

Keyword Examples

initial example:

p { background: #f36; padding: 2rem; font-size: 2rem; color: #fff; }
/* Reset <code>display</code> to its default value: */
p { display: initial; }

inherit example:

<div class="wrapper" style="border:5px solid blue;">
  <div style="border: inherit;">...</div>
</div>

revert example:

div { display: revert; } /* Falls back to the browser’s default <code>display: block</code>. */

unset example:

<div class="wrapper" style="border:5px solid blue; color:#fff;">
  <div class="ele" style="border: unset; color: unset;">...</div>
</div>

Using all

The all shorthand resets every property (except unicode-bidi and direction) to initial, inherit, or unset. For example:

div { all: inherit; }
strong { all: initial; }

CSS Value Computation Steps

When a browser renders a page, each CSS property goes through four stages:

Specified value : The value written by the author, user, or user‑agent.

Computed value : The specified value after cascade processing and conversion of relative units (e.g., em to pixels).

Used value : The computed value resolved to an absolute value when layout information is available.

Actual value : The final value after any device‑specific rounding or color‑depth adjustments.

Specified Value

The browser first assigns a specified value based on the cascade. If no cascade result exists, it falls back to the parent’s computed value for inherited properties, or to the property’s initial value otherwise.

Computed Value

The specified value is transformed—URLs become absolute, em and ex units become pixels, etc. If a property’s value cannot be resolved (e.g., an invalid URL), the computed value remains the same as the specified value.

Used Value

Some values depend on layout context (e.g., a width expressed as a percentage of the containing block). The used value resolves these dependencies into absolute numbers.

Actual Value

Finally, the browser may need to approximate the used value for the rendering environment, such as rounding to whole pixels or converting colors to the device’s color space.

Conclusion

This article covered the fundamentals of CSS cascading, inheritance, selector specificity, rule order, and the keywords that let developers explicitly control default values. Understanding these mechanisms helps you write less redundant CSS and maintain larger stylesheets more effectively.