Order of prioritization when using multiple contradictory css files

Question

When using multiple css files on the same page and they collide, how do i know which one is going to be used? For example, if one says blue body background and the other one

Answer 1

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.