Have you ever tried to make a simple CSS change to your website but nothing happened? You’re not going crazy; you’re most likely just missing some context. Another way of saying it is that the rule you added wasn’t the strongest.
In this two part series, I share some simple steps to writing the perfect CSS rule the first time, every time. Keep in mind that this isn’t about writing CSS specifically but about how to write CSS to modify an existing site or design. Before we begin, there is a concept that we have to nail down.
CSS Specificity
Specificity decides what rules are applied to the elements in your browser. There are three basic things that determine specificity: location, order, and weight.
Location
While you wouldn’t normally include the style locations as a part of specificity, for the sake of simplicity, we will. There are three places you will find CSS written in any given page:
- In a linked CSS file, which is preferred
- Written in the head of a particular page
- Written within the specific element itself.
Technically, the second one could be anywhere in the document. The last one is known as inline styling and should generally not be used. But that’s a discussion for another time.
There is one important thing to note about inline styles: they can never be overridden without adding an additional declaration of !important to your rule (see below). These types of rules are too specific. which is why it’s recommended you don’t use them.
p { font-size: 1.2em !important; }
For the sake of this post, we will treat the first two methods equally, although there are some things to keep in mind and they have to do with the next two ideas.
Order
Order is a pretty simple concept: all other things being equal, rules are applied in the order they are found in the page. So, CSS rules that come later will override rules previously declared. With this understanding in mind, rules are usually applied in the order of the locations above. First, the externally linked stylesheets are applied, then the styles in the head of the page, and then inline styles. I say “usually” because stylesheets and styles written within the page can be placed anywhere. The order in which they appear as the page is rendered is the order in which the rules will be applied.
Weight
This is where things get a little complicated. Your CSS rules have a weighted value that determines which rules are applied. Here are the basics of how weight is determined:
- 0,0,0,1 = per tag (i.e. p, a, div, span, input)
- 0,0,1,0 = per class (i.e. .social, .entry, .content)
- 0,1,0,0 = per ID (i.e. #content, #header, #footer)
- 1,0,0,0 = Inline Styles
Let’s look at some examples.
p { color: yellow; } .entry p { color: red; } #content p { color: blue; } #content .entry p { color: pink; }
Let’s add up the above rules.
- p = 1 tag(1) = 0,0,0,1
- .entry p = 1 class(10) + 1 tag(1) = 0,0,1,1
- #content p = 1 ID(100) + 1 tag(1) = 0,1,0,1
- #content .entry p = 1 ID(100) + 1 class(10) + 1 tag(1) = 0,1,1,1
For our use case, we can remove the commas and preceding zeros and think of these numbers as 1, 11, 101, and 111.
The last rule has the greatest weight and therefore would be applied but only to p tags within the .entry class within the #content ID. All p tags in #content that are not in a .entry class would still be blue and all p tags not in the #content or a .entry class would remain yellow.
Great websites style the basic elements meticulously and then only override with greater specificity when absolutely necessary.
There is a lot more that could be discussed about CSS specificity, but this will give us a foundation for what we’re really after: tracking down the right rule to make some changes to our website.
George says
The link “Continue to part 2” is incorrect, it points back to part 1.
I was able to view part 2 by changing the “…part-1” in the URL to “…part-2” and I found both of your posts to be very informative.
Thanks for sharing.
George
James Laws says
Thanks for the header up. I corrected the link. Glad you found it helpful.