CSS Value Inherit

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


<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 sizespan>
    div>
body>

html>

Output:

Example 2: Inheriting the color from the parent element.

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

Explore