Question

<link href="style1.css" rel="stylesheet" type="text/css">
<link href="style2.css" rel="stylesheet" type="text/css">

In style1, let’s say I declare color to be white:

.box{
    color:#fff;
}

In style2, I declare it to be black.

.box{
    color:#000;
}

How come style1 takes priority?

Answer 1

If both CSS contains the exact same css class, the last loaded CSS file will be looked upon as an extender – meaning you have to put !important after the last defined style in your css.

Sample

Style1

.box{
    color:#fff;
}

Style2

.box{
    color:#000 !important;
}

This way, Style2 will at all times overrule Style1.