February 1, 2022

Programmingempire

In this article, I will describe Styling Elements Using Inheritance in CSS. To begin with, let us understand what is inheritance. Basically, inheritance allows a child to inherit the properties of their parents. In the context of CSS, inheritance means that a child HTML element inherits the styling properties from its parent element.

Hence, there are CSS properties that a child element can inherit from its parent element. However, there are certain properties that can’t be inherited. For instance, the properties like border, position. Furthermore, overflow, z-index, background are some of the examples of non-inheritable properties. In contrast, the properties like color are inherited. Similarly, font-size, font-style, font-family, letter-spacing are some of the examples of inherited properties.

Examples on Styling Elements Using Inheritance in CSS

The following example shows that the color property for the body tag is also applicable to child elements. Hence, the <h1> element, and the second <p> element inherit this by default. But, since we specify the color for the <div> element, it overrides the inherited property. Furthermore, the <p> element inside <div> inherits the color property that we have specified for the <div> element.

<html>
 <head>
   <title>CSS Inheritance Example</title>
   <style>
     body{
        color: #dd77ee;
        margin: 20px;
        padding: 20px;
     }
     div{
       color: #ffdd55;  
     }
   </style>
 </head>
 <body>
    <h1>Inheritance in CSS</h1>
    <div>
        A Div Element
        <p>Paragraph inside a DIV element!</p>
    </div>
    <p>A Paragraph outside DIV element!</p>
 </body>
</html>

Output

**Web Page to Demonstrate Styling Elements Using Inheritance in CSS**

Using inherit Keyword

For the purpose of inheriting the non-inheritable properties, we use the inherit keyword. Basically, the inherit keyword specifies that the value of this property will be inherited. So it takes its value from the parent element. The following example shows the use of border property for a div element. However, the <p> element which is inside <div> doesn’t inherit it by default. Hence, the output shows the border for <div> element. However, there is no border for the inside <p> element.

<html>
 <head>
   <title>CSS Inheritance Example</title>
   <style>
     div{
        color: #dd77ee;
        margin: 20px;
        padding: 20px;
        border: 6px #2288aa solid;
     }
     p{
       color: #ffdd55; 
       margin: 10px;
       padding: 10px;
     }
   </style>
 </head>
 <body>
    <h1>Inheritance in CSS</h1>
    <div>
        A Div Element
        <p>Paragraph inside a DIV element!</p>
    </div>
 </body>
</html>

Output

**Example Showing CSS Properties not Inherited by Default**

In order to make the border property inheritable, we use border: inherit in the style. Hence, we get border around <p> element also.

<html>
 <head>
   <title>CSS Inheritance Example</title>
   <style>
     div{
        color: #dd77ee;
        margin: 20px;
        padding: 20px;
        border: 6px #2288aa solid;
     }
     p{
       color: #ffdd55; 
       margin: 10px;
       padding: 10px;
       border: inherit;
     }
   </style>
 </head>
 <body>
    <h1>Inheritance in CSS</h1>
    <div>
        A Div Element
        <p>Paragraph inside a DIV element!</p>
    </div>
 </body>
</html>

Output

**CSS Border Property is Inherited using the inherit Keyword**

To summarize, inheritance is an important aspect of styling elements. Because it eliminates duplicate code. So, without inheritance, we need to use a property several times. That makes the stylesheet lengthy. Also, inheritance results in ease of update. So, for changing the color, we need to do it in one place. Otherwise, we need to change it in all places. So, by using inheritance we can avoid styling errors.

Programmingempire

Examples on Styling Elements Using Inheritance in CSS

Using inherit Keyword

Further Reading

You may also like...

Learn CSS Through Code Examples

What is Tailwind CSS?

CSS Frequently Asked Questions