Can one CSS file take priority over another CSS file?

Question

I\'m in London working on an application, and the html/css guy is in New York. He\'s sending me updates daily by email as we have no source control set up that we can both u

Answer 1

It works like this:

<link rel="stylesheet" type="text/css" href="first-style.css">
<link rel="stylesheet" type="text/css" href="second-style.css">

second-style.css:

@import 'third-style.css';

The last style imported is the one that all the rules stick. For example:

first-style.css:

body{
    size:200%;
    color:red;
}

second-style.css:

@import 'third-style.css';
p{
    color:red;
}

third-style.css:

p{
    color:green;
    size:10%
}

The resulting styles would be:

body{
    size:200%;
    color:red;
}
p{
    color:green;
    size:10%

Note: if you add !important rules, it's different. For example:

first-style.css:

body{
    size:200% !important;
    color:red !important;
}

second-style.css:

@import 'third-style.css';
p{
    color:red;
}

third-style.css:

p{
    color:green;
    size:10%
}

The result would be:

body{
    size:200% !important;
    color:red !important;
}

I hope this helps!

Answer 2

I found a post here in stackoverflow. I thought it may help you.

An efficient way to merge 2 large CSS files

If you are looking to actually merge your files then this will be useful, I guess.

Specifying the CSS in a more specific way will also help you.

like:

td.classname{}
table.classname{}

Answer 3

I personaly strictly discourage to use !important. Learn what's really important from here.

You should know:

.some-class .some-div a {
    color:red;
}

Is always more important than (order of apperance have not matter in this case):

.some-class a {
    color:blue;
}

If you have (two declarations with the same level):

.some-class .some-div a {
    color:red;
}

.some-class .some-div a {
    color:blue;
}

Later declaration is used. The same is when it comes to files included in head tag as @Kees Sonnema wrote.

Answer 4

CSS rules are applied sequentially. So, all you have to do is include your CSS last, after all others.

Answer 5

I use CSS priority rule as below:

1. First rule as inline css with html which will marge any kinda css.

2. Second rule as the keyword use !important in css declaration after value.

3. Third rule as the html header stylesheet link priority order (Main css stylesheet after custom css stylesheet).

Basically user want to use the third rule also want to marge bootstrap css to custom css, example below:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   

<!-- App Custom CSS -->
<link rel="stylesheet" href="assets/css/custom-style.css">

Answer 6

Somewhere I read that it is not about which CSS file is called before or after, but actually which loads first. For example, if your first CSS file is long enough to keep loading while the one under (which by basic theory should have higher priority) already loaded, these lines loaded after will have higher priority. It's tricky but we must be aware of it! Technique with specificity seems legit to me. So the more specific (#someid .someclass div rather than .someclass div) the higher priority.