CSS Inheritance

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

Inheritance

Inheritance is a process of receiving values of properties by a child element from its parent element.

This is a simple example of inheritance:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> <title>This is to understand CSS Inheritance - Example 1</title>
<head>
<link href="inheritance.css" rel="stylesheet" type="text/css" 
/>
</head>
<body>
<h1>This is to test <i>inheritance</i> in CSS</h1>
</body>
</html>

Source code of css:

h1 {
color: maroon;
}

In the external css file, we have set color for H1 element as maroon. Now look at the html source code, we have an i element, located within H1 element, to make the word inheritance italic. Because of inheritance, word inheritance has also become maroon since it is a child element of H1.

View the example in a browser.

To set the value of a property which you want to be applied throughout a web document, you can place that property value at the very top level of the document tree, for HTML, which is html or body element.Here is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> <title>This is to understand CSS Inheritance - Example 2</title>
<head>
<link href="inheritance-all.css" rel="stylesheet" type="text/css" 
/>
</head>
<body>
<h1>This is to test <i>inheritance</i> in CSS</h1>
<p>This paragraph inherits the value form body element</p>
</body>
</html>

Source code of the css file:

body {
color: maroon;
}

In the external css file, we have set foreground (font) color value of maroon for body element. Because of inheritance, all the elements which are children of the body element, i.e. all the elements of the web document, are using that value for font color.

View the example in a browser.

We can use the value of a property as inherit, to allow that property to inherit the the value form its parent element. This example shows you how we can do that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> <title>This is to understand CSS Inheritance - Example 3</title>
<head>
<link href="inheritance-make.css" rel="stylesheet" 
type="text/css" />
</head>
<body>
<div class="up">w3resource<//div>
<p class="down">This paragraph inherits the value form its 
parent element</p>
</div>
</body>
</html>

Source code of css:

.up {
background-color: lightyellow;
color: maroon;
font-weight: bold;
}
.down {
background-color: inherit;
color: inherit;
font-weight: normal;
}

In the css code, we have set background color, color and font weight for a particular class called up. And in another class down, we have used inherit as value for background color and color. Since down class is used in a p element which resides bellow the div with up class, background color and color property of the p element uses same values as set in the up class of the div element.
View the example in a browser.

Previous: Origin and Order of Cacading
Next: CSS Specificity