0
0
0
Learn Everything you need to know about CSS Inheritance image
CSSHTML
createor-profile-picture
Spurgeon Gnan Prakasham Tara
creator

Nov 26, 2024

Learn Everything you need to know about CSS Inheritance, A Step by Step Approach

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!

Topics covered in this article:

What is Inheritance in CSS

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.

Starter code for this blog post

To get started, create a folder named inheritance on your machine. Inside that folder, set up the following:

  1. Create a folder named css, and within it, create an empty CSS file named styles.css.
  2. Create an HTML file in the 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:

CSS Inheritance Starter Code Preview

Now, Lets start exploring CSS inheritance.

CSS Inheritance in Action

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:

CSS Inheritance in Action

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.

What kind of styles will be inherited

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.

How inheritance works?

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.

css
h1 { 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.

How Inheritance Works

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.

Inheriting Non Inherited Properties

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.

Explicitely Inheriting non inherited Properties

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.

Conclusion

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!

Please signin to view resources

Comments

No Comments Found

Follow Us:

Related Posts

View All
Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

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 more
Introducing CSS -  What is CSS?

Introducing CSS - What is CSS?

Introduction to CSS. What is CSS and How to use it to design your web layouts and components to become a better frontend developer.

Read more
How to ADD (or) CONNECT our CSS with HTML

How to ADD (or) CONNECT our CSS with HTML

Discover 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 more
Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Guide for Targeting HTML Elements using HTML Element Selector, ID Selector, Class Selector , Attribute Selector, Universal Selector

Read more
Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

CSS Combinators: Selectors, Descendant Combinations, Child Combinations, Sibling Combinations, and More

Read more