CSS Inheriting And Overriding Styles: CSS Web Design Series Part 4

CSS inheriting

CSS Inheriting And Overriding Styles
Get the source code for this lesson at the end of this post!

Hey, everybody. We are going to work with CSS inheriting and overriding styles today. In a previous post, we briefly discussed how overriding works. In today’s lesson, we’re going to get into it in more depth. First, you need to understand how inheritance works. Take a look at the HTML hierarchy chart below.

HTML hierarchy chart

Starting at the top, HTML is what we call our root element. It is the “parent” of all the other elements that are “nested” inside of it in our HTML document. In the chart, the head and body element is nested inside of the HTML element. Then, nested inside of our body element is an h2 and two div elements. In case you don’t know, the div stands for divider. It’s basically what we use to divide our page up into manageable sections and gives us a ton of control over the layout of our design. Next, we have a p element nested inside of our first div, and in the second div, we have an h1, p, and ol element. The ol element stands for “ordered list”. Our p element from the first div has a strong and an em element nested in it. Strong is “bold” and em is “emphasis”, aka “italics”. Finally, we have two li or “list items” nested in our ol element. All of this is called the HTML hierarchy. It is a parent/child relationship hierarchy and is created as you add elements to your HTML document This HTML hierarchy is what we use to control CSS inheritance.

The reason you need to understand the HTML hierarchy is for the purpose of CSS inheritance. A child element will inherit the CSS styles from its parent. For example, if we create a CSS rule for the body element that has a font color of purple, then every child that is nested inside of the body element will inherit the CSS style. And every grandchild of the body will inherit it as well. Look at the code and display examples below. I threw together a bunch of HTML elements to demonstrate how the children and grandchildren of the body will inherit its style. Don’t worry about the indentation in this example; it’s just for a demonstration.

Mix of elements inherit style example

Mix of elements inherit display

As you can see from the example, every child and grandchild of the body element inherited its CSS style. Which is just the font color purple, and because the body element holds all of the elements that are visible on the web page; everything has purple text now. In the final example, I added an ol rule with a font color of blue. And to give a clearer example, I’ve also added another p element and one more ol (ordered list) outside of the div element. Below, you can see the updated code and display.

ol override code

ol override display

The ol rule has overridden the font color for a few elements now. First, we have blue font for the ol, li, and em elements that are nested inside of the div element. Then I added a new p element nested inside of the div and a new ol that is outside of the div just to throw some more examples in. Finally, the new ol and li elements that I added outside of the div were also affected by the override.

I tried to mix things up a little bit with the code in this post. Hopefully, you have a good understanding of CSS inheritance now and how a style override works. Overrides are not limited to font color; you can override any CSS style wherever you want; even multiple styles at once. Inheritance and overriding takes some practice to get comfortable with. I tried to give some really basic examples in this lesson, but like always you should try it out on your own. The best way to learn a new computer language is practice, experimenting, and repetition. The more you progress through these lessons; the more fun it will get. CSS is a super powerful and absolutely necessary tool for web designers. This is just the tip of the iceberg. More advanced CSS that we’ll get into later will allow you to make your page animated and give the user an awesome experience, among so many other things.

Source Code Before Overrides


<!DOCTYPE html>
<html>
<head>
<title>Style Inheritance And Overriding</title>

<style>
body{
color: purple;
}
</style>

</head>

<body>
<div>
<h1>Heading 1</h2>
<h2>Heading 2</h2>
<p>This is our <strong>First</strong> paragraph.</p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<ol>
<li><em>item 1</em></li>
<li>item 2</li>
<li>item 3</li>
</ol>
<p>This is our second paragraph.</p>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
</body>
</html>

Source Code #2 After Overrides


<!DOCTYPE html>
<html>
<head>
<title>Style Inheritance And Overriding</title>

<style>
body{
color: purple;
}
ol{
color: blue;
}
</style>

</head>

<body>
<div>
<h1>Heading 1</h2>
<h2>Heading 2</h2>
<p>This is our <strong>First</strong> paragraph.</p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<ol>
<li><em>item 1</em></li>
<li>item 2</li>
<li>item 3</li>
</ol>
<p>This is our second paragraph.</p>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>ANOTHER PARAGRAPH ADDED AFTER THE OL RULE OVERRIDE.</p>
</div>
<ol>
<li>ADDED AFTER THE OL OVERRIDE</li>
<li>ADDED AFTER THE OL OVERRIDE</li>
</ol>
</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: