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 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.

Answer 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.

Answer 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.

Answer 3

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