Overview
As developers use CSS, oftentimes they’ll come across situations where multiple stylesheet rules are being applied to the same element on the page. When multiple rules target the same element, how does CSS decide which rules take priority?
Enter in the concepts of order and inheritance in CSS. Overall, there are just 4 rules to keep in mind, which are explained in this document.
Rule 1: Cascading Order
The term “cascading” refers to the hierarchical order in which different style sheet types interact when conflicts arise. Style sheets cascade in this order (4 having the highest priority):
- Browser defaults
- External style sheets (Linked or Imported)
- Internal style sheets (Embedded)
- Inline styles
This list could be summed up into one basic rule: If two styles come into conflict, the last one used will take precedence. Does that sound a little contradictory to the cascading order list? Allow me to explain the rule:
- Inline styles must be placed in the body of the HTML document, while embedded style sheets must be placed in the head of the HTML document. As a result, inline styles are always the last ones used and therefore take precedence.
- The browser treats all external style sheets as occurring before internal style sheets, regardless of where the link is placed. For example, if you place your linked style sheet after your embedded style sheet, the browser would still view the linked style sheet as occurring before the embedded sheet because it is an external style sheet. Therefore, internal style sheets are always a higher priority than external because they occur later in the document (according to the browser).
For those reasons, we can sum up the cascading order list with that one rule.
What does it mean for “two rules to come into conflict”? It simply means that two contradicting styles are assigned to the same element. For example, let’s say that a linked style sheet declares that all paragraphs have a green font, but your embedded styles declare that all paragraphs have a blue font. Which color will it be? In this case, your paragraphs will have a blue font as the embedded style sheet occurs after the linked style sheet, and therefore has a higher priority.
This will only come into play if two rules conflict with each other in the same element. For example, if your linked style sheet declares that all paragraphs are bold, and your embedded style sheet declares that all paragraphs are green, all your paragraphs will be both bold and green. These two rules do not conflict with each other, and are therefore both used.
Rule 2: Inheritance
Inheritance refers to the way properties flow through the page. HTML uses parent-child relationships. A child element will usually take on the characteristics of the parent element unless otherwise defined. For example, take a look at this code:
<html>
<head>
<style type="text/css">
body {
color: blue;
font-family: arial;
}
</style>
</head>
<body>
<p>
Kyle Orton will be a Pro Bowl quarterback this year.
</p>
</body>
</html>Now, let’s see what that would look like in a browser:
As you can see, since the paragraph tag (child element) is inside of the body tag (parent element), it will take on any styles assigned to the body tag even though it wasn’t given any styles of its own. What if you want the paragraph to take on some rules of the body but not others? You would simply override the rules you don’t want. Here’s an example for you:
<html>
<head>
<style type="text/css">
body {
color: blue;
font-family: arial;
}
p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>
Kyle Orton will be a Pro Bowl quarterback this year.
</p>
</body>
</html>Here’s how it would look in a browser:
You’ll notice a few things here:
- The red font color of the paragraph overrides the blue font color of the body.
- The paragraph still inherits the Arial font from the body, as it wasn’t overridden.
- The paragraph has been set as bold, but does not affect any other part of the body.
Rule 3: Selector Type Precedence
Rules of precedence also apply to the different selector types. Selector precedence occurs in this order (3 being the highest precedence):
- Element
- Class
- ID
In other words, if you had an element with a class and ID selector, and they contained conflicting styles, the ID style takes precedence. For example, let’s take a look at this code:
<html>
<head>
<style type="text/css">
#testid {
color: red;
font-weight: bold;
}
.testclass {
color: blue;
font-family: arial;
}
</style>
</head>
<body>
<p id="testid" class="testclass">
Matt Forte is an unstoppable force. I will be surprised if he ever gets tackled.
</p>
</body>
</html>Here’s how that code would look in a browser:
You’ll notice that although the Class was placed after the ID, the ID still takes precedence. That only applies if both an ID and Class are used in the same element.
Let’s say that they are used in two different elements, like this:
<html>
<head>
<style type="text/css">
#testid {
color: red;
font-weight: bold;
}
.testclass {
color: blue;
font-family: arial;
}
</style>
</head>
<body>
<div id="testid">
<span class="testclass">
Devin Hester is probably faster than Usain Bolt.
</span>
</div>
</body>
</html>The code would appear on a browser like this:
Even though we used both an ID and Class selector, the Class selector overrode the ID selector because it was the last to be used. An ID selector will only take precedence over a Class selector if they are both used in the same element.
Rule 4: The !important Rule
The !important rule is a way make sure your most crucial CSS rules are always applied. It is a way to override the general rule of cascading order. If two styles come into conflict in the same element, and one has the !important rule assigned to it, that one will be used. For instance:
p {
font-color: black !important;
}
p {
font-color: blue;
}Even though the blue font color is placed further down, the black will be used in a conflict because it uses the !important rule. This only applies if the conflicting styles are used in the same element. If used in different elements, the general rule of cascading order still applies. For example, look at this code.
<html>
<head>
<style type="text/css">
#testid {
color: red !important;
font-weight: bold;
}
.testclass {
color: blue;
font-family: arial;
}
</style>
</head>
<body>
<div id="testid">
<span class="testclass">
The Bears will go 16-0 this season.
</span>
</div>
</body>
</html>Here’s how it would look in a browser:
Even though the font color red had the !important rule, it wasn’t used because the styles did not conflict in the same element. Since “testclass” was the last style used, it takes precedence.
Conclusion
When dealing with cascading order and inheritance, here are three rules to keep in mind:
- If two rules come into conflict, the last one used will take precedence.
- When used in the same element, selector precedence occurs in this order (3 being the highest precedence):
- Element
- Class
- ID
- If two styles come into conflict in the same element, and one has the !important rule assigned to it, that one will be used.
This concludes the basic CSS tutorials. Please respond to any of the posts if you have questions or comments.