In this example, we’ll focus on a css property value that I guess many of you ignore (do not use) while styling elements on websites.
It is inherit. Before we go straight into that, know the following:
Each element in HTML is part of a ‘tree’, and every element (except the initial html element) has a parent element that encloses it.
Whatever styles applied to the parent element can be applied to the elements inside it if the properties are inherited.
Below, we’re going to have a look at several cases of inheritance property.
1. Prerequisites
Create a html document with the basic syntax inside like this:
<!DOCTYPE html> <html> <head> <title>CSS Inheritance Property Value</title> </head> <body> <!-- STYLE SECTION --> <style type="text/css"> </style> <!-- HTML SECTION --> </body> </html>
In the html section, we’ll add some elements to show their relation to other elements and understand when they automatically inherit property values from their parents and when not.
Lets first see a basic application of the inherit property value.
2. Basic Application of Inherit
The inherit property value is at some cases automatically applied to child elements, and at other cases needs to be applied manually.
2.1 Automatic Inheritance
I always tend to give the body element a custom font-family so that all elements have the same font applied.
In other words, all elements inherit the font-family property from the body parent.
Look at the code below:
<!-- HTML SECTION --> <div class="parent"> This is a <span>parent</span> element. <div class="child">This is a <span>child</span> element. <p>This is a <a href="#">link</a> inside a paragraph</p> </div><!-- end child element --> </div><!-- end parent element -->
I have added a parent division and inside that two children, another div and a paragraph.
The classes given are so that we can give attributes to parent and see the results to children.
Now below look at the some initial properties I’ve given to these elements:
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller","sans-serif";
}
.parent {
width: 15em;
height: 5em;
color: gray;
font-weight: bold;
font-size: 2em;
border: 0.1em solid red;
}
.parent span {
color: green;
}
</style>
Now to see what what properties have been inherited look at the browser view:
Seen this result, we can state that the following elements get inherited properties automatically:
1. All elements inherit the font-family property from a higher level parent, which is body.
Notice all three lines have the same font applied.
2. All child elements inherit the color (font-color) from the parent element.
Notice all the lines have the same gray color applied (except span and link).
3. The parent span element is set to have a green color, but also the child span gets a green font-color.
So the child inherits from parent automatically span elements too.
Think everything is inherited?
The a anchor element has not been styled, but it shows in blue and underlined. That’s because these two properties are set to be default ones for all anchor tags over the page.
The link did not inherit the color from its parent element, because it has a different color (blue). Look at the border. It has only been applied to the parent element, and it shows only there. That’s why we sometimes need to apply inheritance manually to make these element fit the desired view.
2.1 Forced/Applied Inheritance
Simple as that, refer to the .child class and inherit the border for the child and color property from parent for the link:
.parent a { /* you can refer even to the child class */
color: inherit; /* inherited color from the parent class */
}
.child {
border: inherit; /* inherited the border attributes to child and elements inside */
}
The browser view:
Notice that:
1. The link became the same color as the parent (its parent can be considered both the parent class element and the child class element, becuase the paragraph is nested inside the child element).
2. The border attributes got applied to the child element which contains another element inside, that’s why you see the second smaller red border wrapping both the second and third line (child and paragraph elements).
That was a basic application of the inherit property value. Now let’s see other cases and examples.
3. Cases and Examples
Here we look at some essential cases and examples where we can use the inherit property value.
3.1 Size and Background Inheritance
Change the html code to accommodate the following image and text elements:
<div class="parent-image"> <h4>Everything you can imagine is real.<br>-The Parent Image</h4> <div class="child-image"> <h4>Glad to have looked after you.<br>-The Child Image</h4> </div><!-- end child image --> </div><!-- end parent image -->
and the css code accordingly:
.parent-image {
width: 30em;
height: 30em;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
}
.parent-image h4 {
color: gray;
text-align: center;
line-height: 1.5em; /* vertically align text in the center */
padding: 1em; /* just to differentiate the two elements */
}
.child-image {
width: inherit; /* inherited width */
height: inherit; /* inherited height */
background-image: inherit; /* inherited background */
background-repeat: inherit;
}
Now notice the child element inherits the background and size attributes from the parent:
3.2 Inheritance Manipulations
You can also use the inherit property value to avoid inheritance from one level higher parent.
Look at the codes below:
HTML
<!-- HTML SECTION --> <div class="parent"> <div class="child1"> <h3>A title here</h3> <p>A paragraph text here</p> <button>A button here</button> </div><!-- end child1 element --> <div class="child2"> <h3>A title here</h3> <p>A paragraph text here</p> <button>A button here</button> </div><!-- end child2 element --> </div><!-- end parent element -->
CSS:
.parent h3 {
font-variant: small-caps;
color: red;
}
.parent p {
text-indent: 1em;
color: blue;
}
.parent button {
padding: 1em 2em;
background-color: gray;
color: white;
border-radius: 0.5em;
border: 0.1em solid gray;
}
.child2 p { /* declined inherited attributes from parent */
text-indent: inherit;
color: inherit;
}
.child2 h3 { /* declined inherited attributes from parent */
font-variant: inherit;
color: inherit;
}
.child2 button { /* declined inherited attributes from parent */
background-color: inherit;
color: inherit;
}
Lets look at the browser view and then comment it:
Notice that the parent attributes are applied to the first child but not to the second one.
That is because we chose to inherit attributes when they were already automatically inherited.
This case would result in an inheritance of the default attributes of a higher level parent (i.e body).
3.3 Tag and Location Inheritance
– Tag Inheritance
To explain this, take for example the button tag of html:
<button>Button</button>
With no styling at all, this element has already a view (attributes):
You can see it has a border, a gradient background, a hover state ect.
This is called tag inheritance, it means the element inherits default properties/attributes pre set by the browser.
Whenever you style a button, you just override the browser default properties for that element.
– Location Inheritance
Basically, location inheritance means using the same attributes for a set of elements under the same tag/class.
For example, if you want to have all titles styled with a green color and bold you could just refer to the following:
.title {
color: green;
font-weight: bold;
font-size: 2em;
}
And apply this class to all elements wrapping a title like so:
<div class="title">2. Why us? </div> <p>Just a paragraph to show that this is not a title.</p> <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> <div class="title">3. Help Center </div>
Notice that elements given the title class now have a title look and feel.
3.4 Class Inheritance
Class inheritance is more and more being used in nowadays websites.
It means to apply certain styles from a predefined class, and other styles from another predefined class.
Take, for example, the multiple classes application in css, like below:
HTML
<p>Just a paragraph here. It could be lorem ipsum.</p> <ul class="text-style-1"> <li>This will be just a text line</li> <li class="link bold">Download Now</li> <li>Third line goes here</li> </ul>
CSS
.text-style-1 {
color: #50838e;
font-weight: italic;
font-size: 1.2em;
}
.link {
color: blue;
text-decoration: underline;
}
.bold {
font-weight: bolder;
}
So above I have declared three classes and given them attributes.
Then, I have used them to style the elements by giving them these classes.
Now all three lines will have the attributes of text-style-1 but in addition to that, the second li is going to have added the attributes of the link class and the bold class.
We can say that the second line inherits all ul attributes and just keeps adding new (or overriding existing) attributes.
4. Conclusion
On a more professional approach, we can state that using inheritance is not of much usage as most elements will need specific styling and independence from parent elements they are in.
However, when using inheritance property value to give elements styling attributes, keep in mind that inherit can be applied just as a single value (i.e you can’t have something like: border: inherit 1em #ccc; ) so you don’t get individual values inherited.
If you want to see the browser default styles (from which your element attributes are inherited), you can inspect element and check “Show Inherited Properties” in Chrome.
5. Download
You can download the full source code of this example here: CSS Inheritance Example
