Nov 26, 2024
Hello everyone, welcome to WebDevPlusPlus! I hope you're doing well. In today's blog post, we’ll explore Inheritance in CSS.
Inheritance is a concept widely supported in many programming languages like Java, Python, and JavaScript. Understanding how inheritance works in CSS can significantly improve your skills as a frontend developer. So, let's dive in and learn all about it!
Inheritance means passing properties from parent to child. In CSS, this concept works the same way. Some styles applied to a parent element are automatically passed down to its child elements. In this article, we will cover everything you need to know about inheritance in CSS.
Before we dive in, let’s take a look at the code files and structure we’ll be using.
To get started, create a folder named inheritance
on your machine. Inside that folder, set up the following:
css
, and within it, create an empty CSS file named styles.css
.inheritance
folder, copy the code below into it, and save the file.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inheritance in CSS</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="article">
<h1>Article Title</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores sed
numquam provident iure sunt tempora rerum aperiam ullam animi recusandae
quisquam sit deleniti explicabo labore, voluptate vel, nostrum, qui
impedit!
</p>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
As you can see, the HTML file includes a basic boilerplate structure. Inside the body
tag, there's a div
containing h1
and p
tags. Additionally, the CSS file has been properly linked to the HTML file.
If you're unfamiliar with any part of the code above, feel free to explore w3Schools or MDN Docs to learn more, as HTML is not the focus of this series.
Now, when you open the HTML file in your browser, you will see something like this:
Now, Lets start exploring CSS inheritance.
Go to your styles.css file and add the below CSS styles to the div tag with class name .article.
css.article {
font-family: "Courier New", Courier, monospace;
font-weight: 900;
color: orange;
}
1
2
3
4
5
Now save the file and reload the browser. we will get something like this:
As you can see the styles that we are applying to parent div tag were inherited by its children(h1, p) tags. This is called inheritance.
Keep in mind that not all styles are inherited from parent to child. Only certain styles, such as those related to color and font, are inherited by default. Other styles, like box model properties (e.g., margin, padding, border), are not inherited. While inheritance might not always be essential, understanding how it works can be very helpful, which is why this blog post covers it.
By default, child elements (like the h1
and p
tags inside the div
tag) automatically have the color
property set to inherit
. This means they inherit the color value from their parent element unless explicitly overridden.
cssh1 {
color: inherit;
}
p {
color: inherit;
}
1
2
3
4
5
6
7
That is the reason, Both the h1, p tags inherited the color property from its parent div. we can change this default behavior by setting the color property to "initial" explicitly like shown below.
In your CSS file, Add the below styles.
css.article p {
color: initial;
}
1
2
3
Now, Our CSS file will look like this:
css.article {
font-family: "Courier New", Courier, monospace;
font-weight: 900;
color: orange;
}
.article p {
color: initial;
}
1
2
3
4
5
6
7
8
9
Now, Save the CSS file and reload the browser.
As you can see, the color
property is no longer inherited by the p
tag. Instead, the p
tag's color defaults to black, which is the browser's default.
You can also explicitly instruct the browser to inherit properties that are not inherited by default. To achieve this, add the following style to the parent div
with the article
class in your CSS file:
css.article {
/* Properties that are going to be inherited */
font-family: "Courier New", Courier, monospace;
font-weight: 900;
color: orange;
/* Properties that are not going to be inherited */
border: 5px solid green;
}
1
2
3
4
5
6
7
8
Now, Our CSS file will look like this:
css.article {
/* Properties that are going to be inherited */
font-family: "Courier New", Courier, monospace;
font-weight: 900;
color: orange;
/* Properties that are not going to be inherited */
border: 5px solid green;
}
.article p {
color: initial;
}
1
2
3
4
5
6
7
8
9
10
11
12
In the above code we added a new property to give 5px-width-solid-border to our div tag. Now save the file and reload the browser.
As you can see, a solid border was added only to the parent element. The border
property was not inherited by its children. However, as mentioned earlier, we can modify this default behavior by explicitly setting border: inherit
for any child element.
To demonstrate this, add the following style to the h1
tag in your CSS file:
css.article h1 {
border: inherit;
}
1
2
3
Now our CSS file will look like this:
css.article {
/* Properties that are going to be inherited */
font-family: "Courier New", Courier, monospace;
font-weight: 900;
color: orange;
/* Properties that are not going to be inherited */
border: 5px solid green;
}
.article p {
color: initial;
}
.article h1 {
border: inherit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Now save the css file and reload the browser.
As you can see, the border
property of the h1
tag's parent (the div
element) was successfully inherited by the h1
tag. This demonstrates how we can use both inherit
and initial
to control the default behavior of CSS inheritance effectively.
Inheritance is a fundamental and powerful feature in CSS and other programming languages. The key takeaway from this post is understanding the usage of the inherit
and initial
values to manage CSS inheritance effectively.
That's all for this post! If you found it helpful, please like, comment, and share this blog. I'll be continuing this series with new posts every week, so stay tuned to WebDevPlusPlus. See you in the next article. Bye!
Welcome, Learn essential CSS concepts and stay up-to-date with the latest trends and techniques in web design. Join us to enhance your CSS skills today.
Read moreIntroduction to CSS. What is CSS and How to use it to design your web layouts and components to become a better frontend developer.
Read moreDiscover how to connect CSS with HTML using inline, internal, and external stylesheets. This beginner-friendly guide covers methods and examples to style in css
Read moreMastering CSS Selectors: Guide for Targeting HTML Elements using HTML Element Selector, ID Selector, Class Selector , Attribute Selector, Universal Selector
Read moreCSS Combinators: Selectors, Descendant Combinations, Child Combinations, Sibling Combinations, and More
Read more