CSS Value Inherit

CSS Value Inherit

Last Updated : 24 Aug, 2022

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

CSS Value Inherit

taran910

Improve

Article Tags :

Similar Reads

CSS Value | Initial

The initial value keyword is used to set an element's CSS property to its default value. The initial keyword can be used for any CSS property, and on any HTML element. Syntax: property_name: initial; Example 1: setting font size html <!DOCTYPE html> <html> <meta charset="utf-8

CSS | Value Integer

CSS data type integer represents <integer > .It is a whole number which can be positive(+) or negative(-) .Integer contains one or more than one digits between 0-9.No decimal value is allowed . No units are required to represent an integer value. A lot of CSS properties take integer value like

CSS Value | Unset

To unset the value of an element, unset keyword is used. The unset CSS keyword resets a property of an element to its inherited value if the property naturally inherits from its parent, or to its initial value if it does not inherit. In other words, it behaves like the inherit keyword in the first c

C++ Multilevel Inheritance

Multilevel Inheritance is a type of inheritance in C++ where one class inherits another class, which in turn is derived from another class. It is known as multi-level inheritance as there are more than one level of inheritance.For example, if we take Grandfather as a base class then Father is the de

SVG Properties In CSS

SVGs are XML-based vector images that are widely used on the web. It is not made of pixels. SVGs are composed of paths defined by mathematical equations. This allows them to scale infinitely without losing quality.We will learn What are SVG properties in CSS and how to work with SVG properties in CS