CSS cascade

Cascade is a feature of CSS with the help of which the browser determines the values of what properties will be applied to the element when a conflict of properties occurs. A property conflict occurs when multiple rules are defined for an element whose selectors have the same specificity, and they contain the same properties, but with different values.

Cascade works as follows: if there are multiple rules defined in the style sheet for a one element, the selectors of which have the same specificity and contain conflicting properties, then the values of the conflicting properties of the rule that is located below in the style sheet are set for the element:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p { color: yellow; }
      p { color: red; }
      p { color: green; } /* the element will be set to green text color */
    </style>
  </head>
  <body>
    <p>The text color of the paragraph is green.</p>
  </body>
</html>

Try it »

If different CSS rules for one element contain properties that do not conflict, they are merged into one style, i.e. each new rule adds new style information to the rule that is above:

h1 {
  color: gray;
  font-family: sans-serif;
}

h1 { border-bottom: 1px solid black; }

The code in the example above is equivalent to the code in the example below, in which all three properties are specified in one rule:

h1 {
  color: gray;
  font-family: sans-serif;
  border-bottom: 1px solid black;
}

Usually, additional rules for an element are specified in those cases when one style was specified for several elements at once, but you also need to add something else for a particular element:

h1, h2, h3 {  /* the same style for the three elements */
  color: gray;
  font-family: sans-serif;
}
/* additional rule for headings of the second level */
h2 { border-bottom: 1px solid black; }

With this theme look: