Cascade Order

• The CSS Cascade Order is the algorithm used by browsers to determine which CSS rules apply to an element when multiple, conflicting declarations exist
• The browser sorts competing declarations based on five criteria, with each step taking precedence over

Characteristics of the Cascade order

1. Importance and origin



This is the most critical and first step, which sorts declarations based on their source (like a browser's default settings or a website's custom style) and whether the !important rule is used




The precedence order, from highest to lowest

• Transitions: These have the highest priority and override everything else
• !important declarations: This rule inverts the normal order of precedence
• Animations: Running CSS animations override normal (non-!important) declarations from any origin
• Normal styles: For regular declarations
2. Cascade layers

Introduced in recent CSS specifications, cascade layers (@layer) allow developers to create explicit layers of precedence.

Cascade Layer has main 2 layers:

• Normal layers: For normal declarations, unlayered styles have higher precedence than any layered styles. Within layers, precedence is determined by the order they are created—later layers override earlier ones
• Important layers: For !important declarations, the precedence is inverted. An important declaration in the first layer overrides important styles in later layers or unlayered important styles

Learn More →