The CSS cascade determines how browsers resolve conflicts when multiple rules apply to the same element. Inheritance controls which properties naturally pass from parent elements to their children. Together, these systems govern how final computed styles are produced in the browser.
| Concept | Description | Example | Practical Effect |
|---|---|---|---|
| Cascade Order | Later rules override earlier rules when specificity is equal | .hero { color: blue; } |
Final color becomes red |
| Specificity Priority | Higher specificity overrides lower specificity | p vs .hero p |
More specific selector wins |
| Inline Styles | Inline styles override stylesheet rules in most cases | <p style="color:red"> |
Applied unless overridden by !important |
!important |
Forces declaration to override normal cascade rules | color: red !important; |
Overrides most competing declarations |
| Inherited Property | Child automatically receives parent value | color, font-family |
Child text inherits parent styling |
| Non-Inherited Property | Child does not automatically receive parent value | margin, padding, border |
Must be explicitly set if desired |
inherit Keyword |
Forces a property to inherit parent value | border-color: inherit; |
Copies parent’s computed value |
initial Keyword |
Resets property to browser default | margin: initial; |
Removes custom cascade value |
unset Keyword |
Acts as inherit or initial depending on property type | all: unset; |
Resets intelligently based on property |
revert Keyword |
Reverts to prior cascade layer / browser stylesheet | display: revert; |
Restores earlier cascade source |
Effective CSS architecture depends on understanding not just selectors, but how the cascade, specificity, inheritance, and source order combine to produce final styles. Most styling conflicts arise from one of these systems interacting unexpectedly.
| Usually Inherited | Usually Not Inherited |
|---|---|
color |
margin |
font-family |
padding |
font-size |
border |
line-height |
width |
visibility |
height |
cursor |
background |