How to apply concept of inheritance in CSS ?

Last Updated : 01 Jun, 2023

Inheritance is a concept that we see in our day-to-day life. Children inherit features like height, eyes, nose, etc. from their parents. Inheritance is one of the core concepts of oops language (Object Oriented Programming Language). In which we derive the properties of one class in another for a hierarchy. The class which inherits becomes a child class and from which it is taken becomes a superclass or a parent class.

CSS Inheritance: In CSS inheritance, the child element will naturally inherit properties from its parent element.

Syntax:

<style>
    #parentclass {
        color: red;
    }
</style>
<div id="parentclass">
    Parent Div
    <div id="div1Child">Child Div 1</div>
    <div id="div2Child">Child Div 2</div>
</div>

Here parentclass passes a CSS styling done as color to be red. Whereas the child classes div1Child and div2Child have no ruleset of color: red set to them but they got displayed in red.
It is because the child div’s 1 and 2 inherited the properties from the parent i.e. parentclass.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        #parentclass {
            color: black;
        }
 
        #child1 {
            color: green;
        }
 
        #childchild1 {
            color: red;
        }
    </style>
</head>
 
<body>
    <div id="div1">
        Parent
        <div id="child1">
            Child 1
            <div id="childchild1">
                Child Child 1
                <div id="childchildchild1">
                    Child Child Child
                </div>
            </div>
            <div id="childchild2">
                Child Child 2
            </div>
        </div>
        <div id="child2">
            Child 2
        </div>
    </div>
</body>
</html>

Output:

Output

Here #parentclass has color:black, #child1 has color:green and #childchild1 has color:red. In the above code #child1 and #child2 are in #parentclass so both should get the color black inherited but only child 2 gets the color because we gave #child1 to color: green this is known as specificity.
CSS properties that can be inherited.

We cannot inherit all the properties /rules of CSS. All font-* properties are naturally inherited like
• font-size
• font-family
• font-weight
• font-style, etc.

The color property is also inherited.
CSS properties such as height, border, padding, margin, width, etc. are not inherited naturally. We can do inheritance on noninheritable CSS properties. We use inherit for doing so.

CSS Inherit:

We use inherit on a CSS property for taking up its parent’s element property. Let’s say we have a code:

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        #parentclass {
            padding: 30px;
            color: red;
        }
 
        #Child {
            padding: inherit;
        }
    </style>
</head>
   
<body>
    <div id="parentclass">
        Parent
        <div id="Child">Child</div>
    </div>
</body>
</html>

Output:

Output

In this way, we inherit noninheritable CSS properties using inherit. Only the direct child element of a parent element can inherit it but the grandchild cannot. Instead, it will resort to its original browser computed height.

Suggest improvement

Which property is used to underline, overline, and strikethrough text using CSS ?

Blaze UI Installation

Share your thoughts in the comments