0
0
CSSmarkup~5 mins

What is CSS cascade

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction
CSS cascade decides which style rules apply when many rules target the same element. It helps browsers pick the right style so your page looks good.
When you write multiple CSS rules that affect the same HTML element.
When you want to understand why one style is shown instead of another.
When you combine styles from different sources like browser defaults, your CSS file, and inline styles.
When you want to fix style conflicts on your webpage.
When you use multiple CSS files or frameworks together.
Syntax
CSS
/* No special syntax for cascade itself, but it works with selectors and declarations like: */
selector {
  property: value;
}
The cascade uses three main factors: importance, specificity, and source order.
More specific selectors override less specific ones; later rules override earlier ones.
Examples
Both rules target elements. The second rule wins because it comes later in the CSS.
CSS
p {
  color: blue;
}

p {
  color: red;
}
If has class 'special', it will be green because class selectors are more specific than element selectors.
CSS
.special {
  color: green;
}

p {
  color: blue;
}
The !important rule makes the blue color win even if the red rule comes later.
CSS
p {
  color: blue !important;
}

p {
  color: red;
}
Sample Program
This example shows three paragraphs. The first uses the element selector color (blue). The second uses a class selector that overrides the element color (red). The third uses an ID selector that overrides both (green). This shows how CSS cascade picks the most specific style.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS Cascade Example</title>
  <style>
    p {
      color: blue;
      font-size: 1.2rem;
    }
    .highlight {
      color: red;
    }
    #unique {
      color: green;
    }
  </style>
</head>
<body>
  <p>This paragraph is blue because of the element selector.</p>
  <p class="highlight">This paragraph is red because the class selector is more specific.</p>
  <p id="unique" class="highlight">This paragraph is green because the ID selector is the most specific.</p>
</body>
</html>
OutputSuccess
Important Notes
The cascade helps avoid confusion when many styles apply to the same element.
Inline styles (style="...") have higher priority than styles in CSS files.
Use !important sparingly because it can make debugging styles harder.
Summary
CSS cascade decides which style rule applies when multiple rules target the same element.
It uses importance, specificity, and order to pick the winning style.
More specific selectors and later rules usually win.