Cascade

The cascade, or "cascading," is a fundamental feature of CSS (Cascading Style Sheets) that plays a key role in determining which styles apply to elements on a web page. The cascade defines how different styles and rules are combined, resolves conflicts between them, and determines which styles will ultimately be applied.

The cascade in CSS is based on three main principles:

1. Source - Styles can come from various sources, such as inline styles, internal stylesheets, external stylesheets, and user and browser styles. The cascade determines the hierarchy of these sources.

2. Specificity - Each style rule has a specific specificity based on the selectors used. Specificity helps resolve conflicts when different rules try to apply styles to the same element.

3. Order - When two or more rules have the same specificity, the cascade considers the order in which the rules are defined. A style placed later in the code takes precedence.

Styles acting on a given element can come from different places:

• Default browser styles

• External stylesheet

<head>
  <link rel="stylesheet" href="styles.css">
</head>

• Internal stylesheet in HTML

<head>
  <style>
    .my-paragraph {
      color: blue;
    }
  </style>
</head>

• Inline styles in HTML

<p style="color: red;">Paragraph content</p>

So we can style one element from different places. When several sources set the same property, the browser resolves the conflict like this:

1. The browser's default styles are the weakest.
2. An external stylesheet (<link>) and an internal one (<style>) have the same strength: the rule with higher specificity wins, and with equal specificity, the one that comes later in the document - if <style> is below <link>, it overrides the rules from the file.
3. An inline style (the style attribute) beats every normal selector.
4. A declaration with !important beats even an inline style - it's a last resort (an anti-pattern).

Besides the page author's styles, there are the browser's default styles (the user agent) and user styles, such as their readability settings. Normal declarations are resolved in this order: browser < user < author. !important reverses this order: the author's !important loses to the user's !important, so that the user can always force, for example, a larger font.

You add the !important directive at the end of a value. It raises that one declaration above all normal rules, regardless of selector specificity:

p {
  background-color: red !important;
}

This example gives every paragraph a red background, even if a more specific rule or an inline style sets another background color. Use it rarely - it is an anti-pattern.

What if we use the same location but a different selector?

• Group one - highest priority - ID selector (#element)
• Group two - medium priority - class selector, pseudo-class, attribute (.element)
• Group three - lowest priority - element selector, pseudo-element (element)

Specificity is compared group by group, starting with the most important one: first the number of IDs, then classes, and finally elements. That's why one ID selector beats any number of classes, and .menu .link (two classes) beats .link (one class).

Selectors *, ,, >, +, ~ are not taken into account when determining which style takes priority.