Two css files defining same class

Question

If I have two css files:

File 1:

.colorme {    background-color:Red; } 

File 2:

.colorme {    background-color:Green; } 

And have included them in a page, which one will take priority? I'm guessing the one that is loaded last? If so is there anyway to ensure which one css file is loaded last?

Answer 1

The one loaded last (or as David points out, more accurately included last) wins in this case. Note that it's per-property though, if you load 2 definitions with different properties, the result will be the combination. If a property is in both the first and second, the last wins on that property.

The only way to ensure which is used last/wins is including the <link> elements in the order you want in the page.

For the property, here's an example:

.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css .class1 { color: blue; margin: 2px; } //Second .css 

is equivalent to:

.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; }