Home » CSS » CSS Inheritance Example

About Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

CSS Inheritance Example

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:

Initial Test on Inheritance

Initial Test on Inheritance

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:

Inherit Value Applied to Color and Border

Inherit Value Applied to Color and Border

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:

Size and Background Values Inherited

Size and Background Values Inherited

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:

Vice-Versa Inheritance

Vice-Versa Inheritance

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):

Tag Inheritance - Button Example

Tag Inheritance – Button Example

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.

Location Inheritance - Title Example

Location Inheritance – Title Example

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.

Class Inheritance - Text Example

Class Inheritance – Text Example

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

Download
You can download the full source code of this example here: CSS Inheritance Example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments