CSS inheritance

When specifying a style for an element, some of the properties can be inherited by its child elements and descendants, this effect is called inheritance.

For example, all elements located inside the HTML <body> tag are its child elements and descendants. If in the style for <body>, set the CSS color property of color red for text, then the text color of all its child elements and descendants will also be red:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      body { color: red; }
    </style>
  </head>
  <body>

    <h1>Header text color red</h1>
    <p>The text color of the paragraph is also red.</p>

  </body>
</html>

Try it »

Inheritable properties can be overridden by applying an individual rule to the desired element:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      body { color: red; }
      h1 { color: blue; } /* redefined the text color inside the h1 elements */
    </style>
  </head>
  <body>
    <h1>Header text color blue</h1>
    <p>The text color of the paragraph is red.</p>
  </body>
</html>

Try it »

With this theme look: