CODEWITHSUNDEEP
cssstylesheet
Owen
Owen

Reputation: 4397

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.

Upvotes: 69

Views: 123605

Answers (9)

Michael Odumosu
Michael Odumosu

Reputation: 95

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>

Upvotes: 1

Md Rashadul Islam
Md Rashadul Islam

Reputation: 146

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

Upvotes: 0

Kees Sonnema
Kees Sonnema

Reputation: 5784

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.

Upvotes: 86

Elliot A.
Elliot A.

Reputation: 1581

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!

Upvotes: 1

FoxyStyle
FoxyStyle

Reputation: 177

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.

Upvotes: 3

Rohith Gopi
Rohith Gopi

Reputation: 566

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{}

Upvotes: 1

webrama.pl
webrama.pl

Reputation: 1890

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.

Upvotes: 16

Varun
Varun

Reputation: 5061

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

Upvotes: 3

David Jashi
David Jashi

Reputation: 4511

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

Upvotes: 4

Related Questions