Open In App
Related Articles

CSS Value Inherit

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The value inherit keyword is used to inherit a property to an element from its parent element property value. The inherit keyword can be used for inheriting any CSS property, and on any HTML element.

Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.

Syntax:

property_name: inherit;

Example 1: Inheriting the font size from the parent element.

html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
 
<head>
    <style>
        span {
            font-size: 10px;
        }
 
        .gfg {
            font-size: inherit;
        }
    </style>
</head>
 
<body>
    <h1 style="text-align: center;
               color: green;">
        GeeksforGeeks
    </h1>
    <div style="text-align: center; font-size: 20px;">
        <span class="gfg">Inherited size</span>
    </div>
</body>
 
</html>

                    

Output:

Example 2: Inheriting the color from the parent element.

html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
 
<head>
    <style>
        span {
            color: blue;
        }
 
        .gfg {
            color: inherit;
        }
    </style>
</head>
 
<body>
    <h1 style="text-align:center; color:green;">
        GeeksforGeeks
    </h1>
 
    <div style="text-align: center; color: green">
        <span class="gfg">
            Inherited color is green but
            span color is set to blue
        </span>
    </div>
</body>
 
</html>

                    

Output:

Supported Browsers:

  • Chrome 1
  • Safari 1
  • Edge 12
  • Firefox 1
  • Opera 4


Last Updated : 24 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads