Why is a lower placed CSS link more important than another?

Question

I was wondering why a lower placed CSS link in the head tag is more important as the higher placed link.

Why is this?

<head>
    <link rel="stylesheet" href="less important">
    <link rel="stylesheet" href="more important">
</head>

The names suggests it all. Cascading Style Sheet - CSS... i.e. whats at the bottom is what counts :) — tim.baker, Apr 19 '14 at 17:47
**!important**, in css, is to use as a 'last resort'! And then seriously think about it. Explanation: **[the-important-css-declaration-how-and-when-to-use-it](http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/).** — Ryan Vincent, Apr 19 '14 at 17:49

score 1 · Answer 1 · answered Apr 19 '14 at 17:42

1

Cascading style sheets get processed in the order they are defined. Therefore if you have overlapping definitions the last one wins (or you use the ìmportant keyword).

answered Apr 19 '14 at 17:42

Thanks, I didn't know the !important was for this – user3537202 Apr 19 '14 at 17:44
1

Don't use !important. It is a one shot sledgehammer of a solution. Use selector specificity (since it is, at least, nuanced) – Quentin Apr 19 '14 at 17:53

score 1 · Answer 2 · answered Apr 19 '14 at 17:43

All else being equal a later CSS file will override an earlier one. However, if the selector in the earlier file is more specific (i.e. by ID instead of by class) then it will still apply.

Inline CSS (i.e. a style="..." attribute on the element itself) is added "last" (since all other CSS files are in the head) and so overrides Css from files.

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Before a web-browser even looks at your website it has a default CSS style sheet that it applies to any webpage it comes across (here is link to more information about those specific style sheets).

When a web-browser looks at your website it goes through each line of your html iteratively to see what you want done. If any line contains CSS information the web-browser updates the style sheet that it uses to render your website. So each time your html says to update the style sheet on your website, it replaces the previous information. An exception to this rule is if you use !important. If you use !important then it overrides any future occurrences of that style. Here is an example:

p { color: red !important; }

Why is a lower placed CSS link more important than another?

3 Answers3