1

The question is simple. Is it possible to make sure that competing or conflicting CSS properties between two files included in main HTML get resolved so as to favor the settings in one of the two files.

if I have 

 <link href="A.css" rel="stylesheet" type="text/css">
 <link href="B.css" rel="stylesheet" type="text/css">

and A contains something like

body{
  color: #ffffff;
}

whereas B contains

body{
  color: #000000;
}

Can I somehow indicate that every setting that is present in both files gets its property from, say, A file?

Do some of the engines like SASS or LESS allow this?

MadPhysicist
  • 5,401
  • 11
  • 42
  • 107

2 Answers2

3

CSS stands for Cascading Style Sheets - meaning that the rules at the end will always overrule the rules at the start. So the browser will interpret the rules from A.css first and apply them, then interpret the rules from B.css and apply them, overwriting the rules from A.css.

Same thing would happen if you wrote the rules into a single file.

So for example:

body {
   background-color: red;
}

body {
   background-color: blue;
}

Will return the background-color blue. Same thing will happen if you separate the styles into multiple spreadsheets or write it out in one file.

Here you can read more about Cascading and inheritance.

SASS or LESS cannot change this, as they get compiled into CSS - so anything that is not possible to do with CSS cannot be done with SASS/LESS. Basically they are a tool that help you to write more efficient code that then gets compiled into CSS.

You can specify for a stylesheet to only be applied at certain settings (for instance only on mobile devices) in the markup, or you can use the !important CSS property to mark the rules you always want applied.

Miha Šušteršič
  • 9,742
  • 25
  • 92
  • 163
  • What if the file is included in the middle of the page? Would it be considered "last"? – MadPhysicist Sep 19 '16 at 17:51
  • 1
    @MadPhysicist tangential but worth noting: including styles mid-page (I'm guessing that's in ` – henry Sep 19 '16 at 18:46
  • 1
    @henry, yes, I am aware but I am trying to throw some monkey wrenches into this thing to see how well I understand it :-) – MadPhysicist Sep 19 '16 at 18:52
  • 1
    @MadPhysicist Basically it does not matter. The file will always be read from top to bottom. So if you inspect the page source in the browser, you will see the order in which the CSS will be loaded. It does not matter whether the styles are in the head or the body part of the page. – Miha Šušteršič Sep 19 '16 at 18:55
1

In the A file, maybe use !important? I don't know if this works across CSS files, but you could try this.

body{
  color: #ffffff !important;
}

I hear it's best to avoid using this at all cost, but it may work for you. There is an answer here that explains why not to use important and when to use it.

Community
  • 1
  • 1
joey942
  • 159
  • 2
  • 11
  • 2
    Or course it works across different css files. It's the id/class that counts. – Tom Sep 19 '16 at 14:50
  • I am aware of this. However, I was trying to cure the situation when the developer may not even be aware of what properties are overlapped. This method would involve obtaining this kind of information. – MadPhysicist Sep 19 '16 at 17:49