CSS Inheritance and Specificity

This tutorial is part of a web programming course for people who have no programming experience.


Inheritance

Take a look at this CSS code: 

body{ 
    color: green; 
}

It uses a tag selector to set the color property to green for the body element. Note that by setting the color property, you are setting the color of the text within the body element.

Let's assume that our HTML document has this code in it: 

<body>
    <p>This is a paragraph of text....</p>
</body>

If you look at the document in the browser, you'll note that the text in the paragraph is green, even though our selector isn't targeting P tags. But the P element is nested inside the BODY element. This example demonstrates that if you set the color property for an element, then all child elements (elements nested inside) will get the same color property setting. This is known as inheritance - when child elements get property settings from their parents. Inheritance is a hugely important topic in the world of programming, and as you continue your journey you will see just how important and powerful it is.

Note that in CSS not all properties are inherited from parents to children. As you get more experience you'll learn which ones are inherited and which ones aren't. But, as you just saw, the color property is inherited, and we can set a default text color for the entire page by creating a ruleset that targets the BODY element.

If you want to override the default text color, and make text inside of paragraphs orange, you could add this CSS code: 

p{ 
    color: orange; 
}

Now all paragraph elements, and their children will have the text inside them appear as orange.

As mentioned, inheritance and the ability to override inherited properties, is a big deal in programming.

Specifity

Look at these two rulesets:

h2.warning{ 
    color: red; 
}

h2{
    color:blue;
}

Notice that the property settings are in conflict, one sets the color property to red while the other sets it to blue. So if your HTML code includes this element, then will the text color be red, or blue? 

<h2 class="warning">Watch out!</h2>

The prevailing color will be determined by the more specific specific selector. The first ruleset is more specific because it targets h2 elements that also have their class attribute set to a value of 'warning'. Whereas the second ruleset targets h2 elements in general. These sorts of conflicts occur quite a bit in CSS code.

When there are conflicting property settings, the ones that belong to the ruleset with the more specific selector will be applied. The type of selector will come into play as well, and here are the basic rules to know:

  1. Class selectors are more specific than tag selectors
  2. ID selectors are more specific than class selectors.

I'll add an ID attribute to the H2 element to demonstrate that ID selectors are more specific than class (and tag) selectors:

<h2 id="special-alert" class="warning">Watch out!</h2>

Now assume that we have these rulesets in our CSS code:

#special-alert{
    color: orange;
}

h2.warning{ 
    color: red; 
}

h2{
    color:blue;
}

The prevailing color would be orange, because it's in the most specific ruleset, which is using an ID selector.

If the specificity of two rulesets is equal, then the one that appears later in the CSS code will win.

For the purposes of this course you won't have to worry much about specificity. The code that we write in this course will be fairly simple. But as you dig deeper into web programming you'll come across extremely complex selectors and it can be quite challenging to deal with them. That's one reason why I tell my students that CSS is pretty easy to learn, but very difficult to master.

NEXT LESSON: CSS Colors and Fonts