Inheritance is the way of letting a child element use properties of its parent to format itself.
It helps us as developers to design a webpage faster, cleaner, and with less amount of codes.
The first note that you should always remember is the fact that styles we create for each element aren’t the only styles that browsers apply to elements.
There are other styles as well which are called browsers default styles.
The styles that we create are called author styles.
If an element does not have any author style applied to it, it will inherit browser’s default styles.
The priority of browsers default styles are low and your styles override them.
We’re going to use a few examples to show how inheritance works:
In the example below we format a <body> element to have red color for its content using “color” property. In this case the entire elements that are children of the <body> element will have red color for their content as well.
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
body{
color: red;
}
</style>
</head>
<body>
<div>
<h1>I'm the h1 child of the body element</h1>
<p>This is the p element which is a child of the body element</p>
</div>
</body>
</html>Behind the scene, all child elements used the value for “color” property in the <body> element for their own “color” property.
You should know that a child element will not inherit all the properties of its parent. Basically some properties are inheritable and some aren’t unless you force them to inherit their values from parent element.
For example if a parent element like <div> element has a double-line around its border, none of the child elements will inherit this double line border!
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
body{
color: red;
}
div{
border:double;
}
</style>
</head>
<body>
<div>
<h1>I'm the h1 child of the body element</h1>
<p>This is the p element which is a child of the body element</p>
</div>
</body>
</html>We can force any property of a child element to inherit its value from the parent property.
In the example above we mentioned that a child element will not inherit the value of border property from its parent. But we can force this, using the keyword “inherit”.
Here’s how you can do it:
Select the target child-element using one type of selector that meets your needs (for example Element Selector type or Class Selector type) then in the declaration block, set the name of the property you want that child element to inherit from its parent, and then for the value of this property use “inherit” keyword.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
body{
color: red;
}
div{
border:double;
}
h1 , p{
border:inherit;
}
</style>
</head>
<body>
<div>
<h1>I'm the h1 child of the body element</h1>
<p>This is the p element which is a child of the body element</p>
</div>
</body>
</html>In the example above, the child element looks up to its parent to get the value for the “border” property and if there’s a value for this property in the parent element, it will inherit that value. Also if the parent didn’t set any value for the “border” property, the child element will also left the value for this property to be empty (in this situation browsers default style will apply which is no-border).
Note: sometimes the parent itself also inherits the value of a property from its parent! In that case the child of this parent also inherits the value that the parent of this child inherited from its parent. OK that’s a lot of parenting! Let’s see an example to understand this better:
In the example below we set a border for <body> element, and the <div> element which is a child of this <body> element, inherited the value for “border” property with the help of keyword “inherit”. Also <h1> and <p> elements are both the children of this <div> element and they also inherited the value for their border-property from their parent which of course with the help of keyword “inherit”.
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
body{
color: red;
border:double;
}
div{
border:inherit;
}
h1 , p{
border:inherit;
}
</style>
</head>
<body>
<div>
<h1>I'm the h1 child of the body element</h1>
<p>This is the p element which is a child of the body element</p>
</div>
</body>
</html>We mentioned that some properties like “color” property, by default inherit whatever value the parent element have. But if you explicitly set a value assign to “color” property for a child element, this explicit value overrides the inherited value.
Note: In later sections when introducing a new CSS property, we will also mention if that property inherits its value from its parent by default or we should force that property to use inherit if necessary.
Note: <html> element is the top-level element. Beneath it are its child elements like <head> and <body>. And beneath those are their children, then their children and so on. The point is finding the actual value of a property in a child element that is inherited can move up the tree until it reaches the top level element which is <html> tag.
So if you set the value for a property here in html element, all the children can inherit that value if:
-
No other elements in the tree override the value of the
property -
The specified property is inheritable (unless the child element
forced it to inherit).
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html{
font-size: 50px;
}
</style>
</head>
<body>
<p>
The font size of this paragraph is 50px;
</p>
</body>
</html>