What Is Cascading in CSS?

Cascading in CSS refers to the process by which the browser determines which style rules to apply when multiple rules target the same element. The term "cascading" highlights how CSS applies a hierarchy of rules, where certain rules take precedence over others based on defined principles.

For Example,

Output:

In this example, the inline style color: red; will override the internal style color: blue; because inline styles take priority in the CSS cascade.

How Cascading Works in CSS?

CSS rules can come from multiple sources: user-defined styles, browser default styles, and custom styles from a website. The cascading process determines which of these styles is applied when they conflict.

Here's how it works?

1. Specificity: CSS rules with more specific selectors take priority over less specific ones. For example, an ID selector (#header) is more specific than a class selector (.header), so it will override it if both are applied to the same element.
2. Importance: Styles marked with !important take precedence over all other styles, even if they are less specific. However, overusing !important can lead to maintenance problems and should be avoided unless absolutely necessary.
3. Source Order: When two rules have the same specificity and importance, the order in which the rules are defined matters. The later rule (appearing further down the CSS file or in the later <style> block) will override the earlier one.

Cascading Order Breakdown

Here’s a simplified breakdown of the cascading order from highest priority to lowest priority:

• !important: Highest priority, regardless of source.
• Inline styles: Next in priority, unless overridden by !important.
• Internal CSS: Styles within a <style> tag which apply only to that document.
• External CSS: Styles from external CSS files linked to the HTML document, which apply globally across multiple pages.
• Browser/User styles: Defaults or user-defined preferences.

!important > Inline CSS > Internal CSS > External CSS > Brower/User Styles

Output

In this example, we can see even afterinline CSS and internal CSS, the external CSS having !important overrides all the styles.

CSS Specificity

CSS specificity plays a huge role in the cascade. It is a measure of how specific a selector is, and it helps determine which rule applies when multiple rules match the same element.

CSS specificity is calculated using a point system based on the types of selectors used in a rule:

• Inline styles: 1000 points.
• ID selector: 100 points
• Classes, attributes, and pseudo-classes: 10 points.
• Tags and pseudo-elements: 1 point.

/* Less specific */
div {
 color: blue;
}

/* More specific */
#header {
 color: green;
}

/* Most specific */
#header .title {
 color: red;
}

In this case, if an element matches all three selectors, the style color: red; will be applied because it has the highest specificity.

Rule Overriding

Rule overriding in CSS happens when more than one style is applied to the same element, and one style wins over the other. The most specific style or the one that comes last in the code usually gets applied.

Output:

• The first <p> is styled by the tag selector, so it's green.
• The second <p> has a class special, which overrides the tag selector, making it blue.
• The third <p> has both a class special and an ID unique. The ID rule is more specific, so it’s red.