Habdul HazeezInheritance in CSS sort of work the same way as an inheritance in humans, in the sense that, a child can inherit some of his parents attributes but not all.
Now, the question is: What can be inherited in CSS? Am glad you asked.
The answer is CSS Properties. And just a quick reminder that CSS Properties are the likes of font-size, color, background-color e.t.c
These properties are further classified into two:
- Inherited Properties
- Non-inherited Properties
INHERITED PROPERTIES
From the Mozilla Developer Network:
When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value*.
This translates to: If you have a parent and child element, and there is an inherited property specified in the CSS rule targeting the parent if this value is not changed in the CSS rule targeting the child element, the child element will make use of the value(s) specified in the parent CSS rule.
Let's take some examples.
As usual, to follow along create your HTML and CSS files and don't forget to save and refresh your browser to see the changes.
Given the code snippet below:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed aliqua.</p>
</div>
div {
font-size: 3em;
}
From the code above, it's evident that the paragraph does not have a font-size property. But, when you view it in your browser, the paragraph has a font-size of 3em and the browser says "Inherited from div" which makes the p the child of the div element:
And if you switch over to the Computed tab, you will realize the paragraph has a computed font-size of 48px which means it's actually using the div element font-size property:
Let's take another example, update your CSS with the following:
div {
color: green;
font-weight: bold;
font-size: 50px;
}
Save your file and view in your browser, you will realize that the paragraph is making use of all the declarations given to the div element.
NON-INHERITED PROPERTIES
As the name implies, these are properties that cannot be inherited. But Mozilla Developer Network has more:
When no value for a non-inherited property has been specified on an element, the element gets the initial value of that property.
This translates to: If you assign a value to a non-inherited property in the CSS rule of a parent element, the child element won't make use of this value rather it will use the initial value* of this non-inherited property.
Let's take some examples. Update your CSS to match the following code:
div {
border: 5px solid gold;
}
Save your file and view in the browser, you will observe that the paragraph p did not inherit its parent border:
Now, you might be thinking: What if I need the paragraph to use its parent border? There are two ways I can think of right now:
- Adding a
classattribute to the paragraph in HTML, and explicitly adding the border with CSS. - We allow inheritance to take place.
By now, I am pretty sure you are accustomed to option 1, but option 2? Maybe, Maybe not.
We can allow inheritance to take place by using the inherit keyword. The inherit keyword allows authors (you and me) to explicitly specify inheritance, it works on both inherited and non-inherited properties.
Now, add the following snippet to your CSS:
p {
border: inherit;
}
Save the file and refresh your browser. The paragraph will gladly use its parent border.
The list of inherited properties in CSS are listed in the StackOverflow answer below, I'll encourage you to check it out.
Here is the list of all inheritable properies I'm working with W3C's information (updated for CSS 2.1), so I'd guess it should be correct. But knowing web browsers (IE specifically), some of these might not be inheritable by all browsers:
azimuthborder-collapseborder-spacingcaption-sidecolorcursordirectionelevationempty-cellsfont-family- …
*The initial value of a CSS property is its default value.
Up next, The Box Model.
