CSS - inherit

The CSS keyword inherit directs the element to inherit the calculated value of the property from its parent element.

This can be used for any CSS property, including the shorthand property all.

For properties that are inherited, this serves to maintain the default behavior and is only required if another rule is overridden.

Even in cases when the parent element in the document tree is not the contained block, inheritance always proceeds from that element.

CSS inherit - Basic Example

In the following example, the CSS keyword inherit is used for the color property within the .content class.

It ensures that text elements inside this section inherit their color from the parent body.

 
<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #53a3db;
      color: red;
   }
   header {
      background-color: #06558c;
      color: white;
      padding: 10px;
      text-align: center;
   }
   .content {
      margin: 20px;
      padding: 20px;
      background-color: #b6cfe0;
      border: 1px solid #ddd;
      color: inherit;
   }
   p {
      margin-bottom: 20px;
   }
</style>
</head>
<body>
<header>
   <h1>Header</h1>
</header>
   <div class="content">
      <h2>Main Content</h2>
      <p>This is the main content area with various elements.</p>
      <p>The text color of this paragraph inherits from the parent (body).</p>
   </div>
</body>
</html>
Advertisements