In Which Order Do CSS Stylesheets Override

In which order do CSS stylesheets override?

The rules for CSS rule cascading are complex -- rather than trying to paraphrase them badly, I'll simply refer you to the spec:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.

Does the order of css stylesheet definitions matter?

There is a defined cascade in which the styles are sorted and applied.
When declarations have the same importance (weight), origin and specificity then the latter declaration wins. Most answers cover importance and specificity here but not origin.

Here are some very good slides about CSS Cascades. (Overview all resources)

What is the order of precedence for CSS?

There are several rules ( applied in this order ) :

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. A css rule with !important always takes precedence.

In your case its rule 3 that applies.

Specificity for single selectors from highest to lowest:

• ids (example: #main selects <div id="main">)
• classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
• elements (ex.: div) and pseudo-elements (ex.: ::before)

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

Example: compare #nav ul li a:hover to #nav ul li.active a::after

• count the number of id selectors: there is one for each (#nav)
• count the number of class selectors: there is one for each (:hover and .active)
• count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

A good article about css selector specificity.

Order of prioritization when using multiple contradictory css files

Quick Answer:

If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one.

BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.

---

Example 1:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

The above example will make the color red. Both selectors are the same, and therefore also have the same specificity. And because CSS reads top-to-bottom, we first tell it to be blue, but then we override that by telling it "nevermind, make it red".

---

Example 2:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

The above example will make the background color blue, even though blue was first because the selector is more "specific".

---

Exception (the use of !important):

The inclusion of !important will override both specificity and order, but in my opinion, should only be used if you're trying to mess with a third party code in which you don't have access to change it any other way.

---

External CSS:

Overwrite rules work the same on external CSS files. Just imagine putting them first-to-last, top-to-bottom. The selectors called in the first file(s) will get overwritten by same-specificity-selectors in any subsequent files. But specificity will still trump order within the same file or in multiple files.

---

How to test:

In Chrome, Firefox, and modern versions of IE (probably Safari too), you can right click on something and click "Inspect Element". This will show you the HTML as well as any applied CSS. As you scroll down the CSS (usually on the right), you'll see things that are crossed out - that means they're either incorrect CSS or have been overwritten. To test, you can modify the CSS selectors (either in your own code or right there in the developer tools box) to make them more specific and see if that makes then un-crossed out...etc. Play around w/ that tool - it's VERY helpful.

Not sure how "specific" something is?
Try some of the many online CSS specificity tools:

• https://polypane.app/css-specificity-calculator
• https://specificity.keegan.st/
• https://www.codecaptain.io/tools/css-specificity-calculator

Confused about stylesheet precedence

There are only three types of styles:

• Inline
• Embedded
• External

And the inline styles are very powerful, because, they are included along with the tag:

<div style="/* rules */">

The embedded styles are almost similar to external styles. Embedded styles are defined by using the <style> tag inside the same page. The main difference between embedded styles and external are, embedded are specific to the page, which they are contained, while external are generic to any page that uses it.

<!-- External Style -->
<link rel="stylesheet" href="style.css" />
<!-- Embedded Style -->
<style>
  /* Page Specific */
</style>

And specificity matters in the way of how you import the styles. Always load your external styles <link /> first and then your page specific embedded <style> tags.

The specificity is as follows:

^{* Image credits CSS Tricks.}

I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal.

Consider I am using bootstrap library, and Google Fonts. I will load them first, and then override them in my own styles.

<link rel="stylesheet" href="googlefonts.css" />
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="custom-styles.css" />

There's no difference between having your embedded or internal styles in CSS file or using <style> tag. The order of loading precedence matters.

A CSS file, say style.css with the following contents:

* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}

And having a style tag like this:

<style>
  * {margin: 0; padding: 0; list-style: none;}
  body {font-family: 'Segoe UI'; font-size: 10pt;}
</style>

Both of them have no difference in them. The order you load matters very much.

CSS stylesheets being override even it is in last sequence

You must do like this:

table tr td.testjx, table tfoot tr td.testjx, table thead tr td.testjx, table tbody tr td.testjx{
    vertical-align:middle;
}

You need to inspect where the class is to short the css code...check
if is on the tfoot, thead or tbody or general

DEMO HERE

Does the link tag order make a difference in html?

If you wanna use the font you are getting from Google in styles.css you would wanna take the first approche, this one:

<!-- 1st case -->
<link rel="stylesheet" href="google font url">
<link rel="stylesheet" href="./styles.css">

Otherwise, you couldn't, cause CSS is getting interpreted top to bottom. If you wanna see a difference use for example this font in this order:

<link href="https://fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">

And in your styles.css, define the following:

 *{
   font:inherit;
 }
 html{
  font-family: 'Shizuru', cursive;
 }

Take a look at the page, and then change the order like so and see the difference:

<link rel="stylesheet" href="./styles.css">
<link href="https://fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet">

---

Related Topics