Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
CSS Cascading Order
Cascading Style Sheets are simply the rules you create for how various HTML elements should display. The term “cascading” refers to the order of importance the browser should follow when it encounters conflicting style rules.
For example, you may have a rule in your linked style sheet that specifies all headings should be rendered in the color red. You may have another rule in your embedded styles that specifies h3 headings should be rendered in the color blue. The browser needs to know which rule to follow, and the cascading order is how a browser determines that.
Here’s the cascading order, in order of importance:
- !important
- This can be added to any style rule to give the rule more weight. An example of usage:
h3 {color: red !important}
Typically, when used, this rule will override all other rules. However, there’s more to the story . . . both the web page author and the web page visitor can specify their own rules. See the Origin of Rules entry (next item) for more.
- Origin of Rules
- Both the web page author and the web page visitor can specify their own style sheets. A reader may have poor vision, so he or she creates a style sheet that renders text larger than normal. When the style rules between author and reader conflict, the author’s rule will win over the surfer’s rule of equal weight.
The lone exception is if the user makes a rule important, it will override the author’s rule even if the author also has the same rule set as important.
- Inline Styles
- Inline styles win out over embedded and external styles.
- Embedded Styles
- Embedded styles win out over external styles.
- External Styles
- Between inline, embedded, and external styles, external styles are weaklings! They only come out to play when no other styles challenge them. As low in the cascading order as they are, they are still the most powerful because of the ability to change one file and have that change reflected on all your pages that use that style sheet.
- Specificity
- If the previous conflict resolution hierarchy hasn’t yet solved the problem, conflicting styles can be resolved based on specificity. The more specific style wins out over a less specific one.
- Order of Specification
- As a last resort, when all the other conflict resolution specifications can not determine which style should take precedence, the last style specified will be the style used.
Don’t worry too much about all that. I offer the list in case you run into something quirky, but all you usually need to know is that inline styles override embedded and external styles, and embedded styles override over external styles—but external styles are the most powerful because of their ability to control the styles of an unlimited number of pages.
And the !important declaration is the king of all CSS rules.
