How to apply concept of inheritance in CSS ? ❤️

Inheritance, a fundamental concept in object-oriented programming (OOP), mirrors real-life inheritance where children inherit traits from parents. In OOP, a child class inherits properties from a parent class, establishing a hierarchical relationship between them.

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.

How to apply concept of inheritance in CSS ?

Contact Us