The cascade - CSS - Simple Dev

Demo

Summary

In general, if multiple rules are trying to modify a property, the rule that is farthest down a stylesheet gets applied if all of the rules have the same specificity.

Details

The cascade determines which CSS rules apply to an element when you have multiple rules that can apply to an element. In general, the rule that is farther down a stylesheet gets applied when all of the rules in question have the same specificity.

Examples

Let’s say you have the following rules in your CSS file:

p {
  color: blue;
}

p {
  color: green;
}

p {
  color: red;
}

In this case, the third rule will be applied to the paragraph element since it’s farther down in the CSS file, and the paragraph text will be red.

As another example, let’s say you had the same 3 rules from above split into 3 separate CSS files and linked to them from your HTML file, like so:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="file-1.css">
  <link rel="stylesheet" href="file-2.css">
  <link rel="stylesheet" href="file-3.css">

  <title>CSS Cascade</title>
</head>

The rule in file-3.css would end up being applied to the paragraph element since it’s in the last stylesheet linked in the HTML file.

Exercises

Recreate the CSS code in the embedded CodePen demo. Then try customizing the final color value.

References

Cascade and inheritance on MDN

The cascade – CSS