Can one CSS file take priority over another CSS file?

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 use, I'm constantly making small changes to his css, so each time I get a new file from him, I have to reapply all my changes to it, and obviously the more work I do, the longer this takes each time.

I had the idea of making my own seperate stylesheet, but is there a way to tell the browser to give my sylesheet higher priority and overwrite any of his styles that have the same class name and attributes?

This isn't going to be a public site so we're only going to be supporting the latest browsers.

Solution 1:

It depends on how you set them in your header. So something like this will work:

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

The last one will be picked up.

And an helpful link about stylesheets here: http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

See also: Precedence in CSS if the above doesn't work for you.

Hope it is clear.

Solution 2:

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.

Solution 3:

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

Solution 4:

Css rules are sequential, you should do two things on your html files

1. Include your CSS as the last css
2. Add !important on all css attributes in your css file Eg: position : absolute !important;

that should serve your purpose

Solution 5:

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.