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

CSS height Property

The height property is used to set the height of an element. The height property does not contain padding and margin and border of the element. Syntax: height: auto|length|initial|inherit;Default Value: auto Property Values: auto: It is used to set the height property to its default value. If the he

CSS font-style Property

The CSS font-style property is used to style text in a normal, italic, or oblique face from its font family. This property helps to assign importance and decorate specific text, enhancing the overall user experience. The font-style property is an essential tool in CSS for designing and styling text

CSS [attribute=value] Selector

The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to "value".Syntax: element [attribute = "value"] { // CSS Property}Note: <!DOCTYPE> must be declared for IE8 and earlier versions.Example 1: In this example, The selector h1[id="geeks"] target

CSS [attribute|=value] Selector

The [attribute|=value] selector is used to select those elements whose attribute value is equal to "value" or whose attribute value started with "value" immediately followed by a hyphen (-).Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.Syntax:[attributeType

CSS :root Selector

The :root selector is a CSS pseudo-class that matches the root element of the document. In an HTML document, this is the <html> element. While it behaves similarly to the html selector, the :root selector has higher specificity and is commonly used to define global styles or CSS custom propert