Skip to content
CSS stands for Cascading Style Sheet. CSS saves a lot of work because it controls the layout of multiple web pages all at once. What this means is that browsers read CSS files from top to bottom, but their application in a HTML document is more complicated than that! CSS has a specific order to apply its rules beyond how the browser read it . This particular order is called Priorities of Rules and Specificity.
The basic tiers priority of the CSS rules are:
Order < Specificity < Inline Style < !important Exception
The “<” means that the concept to the right will overwrite the concept to the left. When a browser looks and compares the CSS rules related to a HTML document, it computes each rule in order, replacing or overwriting rules as it goes. However, if the browser runs into a rule that has a minor priority or specificity other than a previous one, it will not overwrite it.
ORDER
This tier is the one with less priority. This tier is the order in which the rules where wrote from top to bottom and how the browser reads them . Rules that are defined last will be the styles properties ultimately displayed by the browser.
p {
color: red;
}
p {
color: yellow;
}
/* p will be yellow */
This is true even for properties in the same rule block.
p {
color: red;
color: yellow;
}
p {
color: green;
color: purple;
}
/* p will be purple */
This also applies to the order of the stylesheets <link> referenced in a HTML document.
<link rel=”stylesheet” type=”text/css” href=”style2.css”>
<link rel=”stylesheet” type=”text/css” href=”style1.css”>
If we put the <link> for the file style2.css above the <link> for the file style1.css, all the rules defined in style1.css will overwrite the rules in style2.css. The same occurs for inline style rules or class, like:
<p class=”green purple”>Text</p>
The rule in a CSS for the class ‘purple’ will overwrite the CSS rule for the class ‘green.’ If the style or class are at the same level of priority, the one that comes last will overwrite all the ones before it. Therefore, the word TEXT will be purple.
SPECIFICITY
. Specificity in CSS is basically:
“The more specific your selector,the more priority your rule will have.”
The order of priority in Specificity is as follow:
element < class (.) < ID (#) < Inline Style < !important Exception
Again, the “<” means that the concept to the right will overwrite the concept to the left. For example, look at the following HTML statement:
<p id=”first_rule” class=”second_rule”>Text</p>
the following CSS rules:
#first_rule {
color: green;
}
.second_rule {
color: red;
}
p {
color: blue
}
Now think in a condition statement for the rules to be applied to the HTML statement :
THEN
Do not overwrite the selector “#first_rule” properties.
The purest form of specificity on CSS from most specific to less specific is:
- ID selector – The element on the HTML document with the specified ID. You’re only allowed one element per ID (and of course, one ID per element).
- Class selector – The element(s) on the page with the specified class (multiple class instances can appear on a page).
- Parent-element Child-element selector – this rule is applicable to a child or a parent element. For example: div p { color: red; }
- Element selector – All HTML element(s) of the specified type.
Inline Styles
The inline style is expressed like:
<p style=”color: green”>I am green!</p>
An inline style sometimes is used to apply a unique style for a single tag. However, the most common way to add CSS is to keep the styles in separate CSS files external stylesheet. Try to avoid the use of inline style as much as possible because they’re annoying to overwrite.
!important Exception
This is the property or rule that forces an overwrite of any of the previous priorities or specificity. A rule that has the !important property will always be applied and cannot be overwritten. Although technically, !important has nothing to do with specificity, it interacts directly with it.
The use of !important property is a bad practice. It should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same tag, the declaration with a greater specificity will be applied.
Some rules of thumb:
- Always look for a way to use specificity before even considering !important.
- Only use !important on page-specific CSS that overrides external CSS.
- Never use !important when you’re writing a plugin/mashup.
- Never use !important on site-wide CSS.
Instead of using !important, consider:
- Make better use of the CSS cascade by the use of specificity.
- Use more specific rules. By indicating one or more elements before the element you’re selecting, the rule becomes more specific and gets higher priority:
<div id=”test”>
<span>Text</span>
</div>
div#test span {
color: green;
}
div span {
color: blue;
}
span {
color: red;
}
- As a nonsense case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify.
#myId#myId span {
color: yellow;
}
.myClass.myClass span {
color: orange;
}
—
Written by Arturo Santiago.
