Forcing Inheritance

In this example, we will look at the border property which is a background-type property and by default is not inherited.

We will create a DIV element and set its border to blue. Lets say that in this case we want all P tags within this specified DIV to also inherit the blue border of its parent, the DIV element.

Simple, we will use the inherit value for any paragraph within a specific DIV element. Our CSS would look like this:

div.example {
   border: 1px solid blue;
   margin: 0 5% 0 5%;
   }
           
div.example p {
   border: inherit;
   }

The markup looks like this:

<div class="example">
 
<p>This is the first paragraph.</p>
  
<p>This is the second paragraph.</p>
  
<p>Each of the 3 paragraphs contained within this DIV
parent element will have a blue border because the P element
inherited the border property of its parent - the DIV. </p>
 
<div>

Which renders as below:

This is the first paragraph.

This is the second paragraph.

Each of the 3 paragraphs contained within this DIV parent element will have a blue border because the P element inherited the border property of its parent - the DIV.

I realize that this is an artificial example. I am not sure why one would want to make the border of a DIV be blue and then force all paragraphs inside the DIV to also have a border of blue.

But it does show how to force the browser to make sub-elements inherit the properties from parent/ancestor elements.