Articles → CSS → CSS Inherit Keyword

CSS Inherit Keyword

In this article, we will discuss CSS inherit keyword.

Purpose

In terms of CSS, inheriting a property means the property value of parent should pass to the child. It means child has the same property value as parent.

Syntax

Css-property-name:inherit;

Example

Consider the following example

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
       div {
           color:red;
       }
       p {
           color:black;
       }    
   </style>
	</head>
	<body>
		<div>
        This is a div
       
			<p>
           This is the test paragraph
       </p>
		</div>
	</body>
</html>

In the above example, div is the parent of paragraph. When you run the above code, you will get the below output

Picture showing the output of the css inherit keyword

Click to Enlarge

In the above image, the paragraph has not inherited the property ‘color’ from div because we have set the value of color in the style sheet at the page level using this code.

p {
           color:black;
       }

Now to inherit the property, we will add an inline style in paragraph. So, the HTML code would be

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
        div {
            color: red;
        }

        p {
            color: black;
        }
    </style>
	</head>
	<body>
		<div>
        This is a div
        
			<p style="color:inherit;">
            This is the test paragraph
        </p>
		</div>
	</body>
</html>

Now run the above code and you will get following output

Click to Enlarge

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
8.0	1.0	1.0	1.0	4.0	Yes

Posted By -	Karan Gupta

Posted On -	Saturday, November 4, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**