CSS Inheritance & Cascade
CSS Inheritance & Cascade — Understand how CSS properties inherit from parent elements, the cascade algorithm, and specificity calculations. The guide walks through The Cascade, Specificity Calculation, Inheritance. When multiple CSS rules apply to the same element, the cascade determines which wins in this order: 1) importance (!important), 2) specificity (inline > ID > class > element), 3) source order (later overrides earlier). Only one value is applied per property. The cascade is calculated per-property, not per-element. Specificity is a 4-part value: inline (1000), ID (100), class/attribute/pseudo (10), element/pseudo-element (1). Calculate: `#nav .item:hover` = 100 + 10 + 10 = 120. `ul li a` = 1 + 1 + 1 = 3. `style="color:red"` = 1000. Equal specificity? Later rule wins. `!important` overrides everything (avoid when possible). The guide is organized into 3 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is.