69

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.

Improve this question
2
  • 5
    just include your stylesheet as the last one in the page and use an higher specificity for your rules Commented Jun 4, 2013 at 8:33
  • 4
    As long as the rules have the same specificity, the last one to be loaded will take precedence. Commented Jun 4, 2013 at 9:04

9 Answers 9

Reset to default
86

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

This solution is just so obvious that I feel a little stupid for not thinking of it myself straight away
No problem, Sometimes I ask question with obvious answers too. It can happen sometimes. :)
Except for me the first one is used when I have a list like that.
Could you paste your code? there has to be a typo somewhere or you do not have the same code in both files. @user34660
See Precedence of CSS rules. In my case I had a title attribute and that changes things.
|
16

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.

Improve this answer

1 Comment

Agreed. !important is the last refuge of the desperate.
4

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

Improve this answer

2 Comments

Not exactly true
Dealing with this problem. It's about the specificity.
3

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

Improve this answer

2 Comments

it kind of gets mandatory on attributes if your element has !important previously added to it. so in case your previous css's doesnt have any !important its not required, but in case they do have important than you will have to be careful with your css
@Varun: The only way to override an !important is to write a more specific !important. It can get tricky, it's not recommended.
3

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.

Improve this answer

1 Comment

Working with React UI components and have them come in with their CSS that you can't have more priority unless you get to be more specific has taught me the very same thing you are saying. ✌️
1

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{}
Improve this answer

Comments

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!

Improve this answer

1 Comment

Thank you, this is the only answer that worked for me.
1

I have found lately that using :nth-child(n) is a swiss army knife, helps take precedence even without the use of !important

div{
    height:20px;
    width:20px;
    background-color:green
}

div:nth-child(n){
  background-color:blue
}
<div><div>

Improve this answer

Comments

0

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">
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.