CSS Precedence to same class from different CSS files loaded separately [duplicate]

Question

Suppose we have 2 css files loaded into a web application, and both declare the .myStyle class with different, overlapping properties:

file 1

.myStyle{
    padding: 10px;
    background-color: rgba(211, 9, 58, 0.08);
    border: 1px solid #D3093A;
}

file 2

.myStyle{
    padding: 12px;
    background-color: rgba(255, 40, 15, 0.18);
    border: 2px solid #D3093A;
}

My question is, which class is going to be used by the browser and which one is going to be overridden? Is there a precedence in this case? My case is, I could declare 2 css files with the same class (but different properties like the examples I provided) on different declaration places, so I can't really be sure on wich one is going to be loaded/read first. Is there such a thing like "css file order" or something?

Thanks for any input.

Answer 1

the end style would be from whichever file comes last when linked in your HTML.

If these styles were both in the same stylesheet, the first style would be overridden by the second because it comes after it in the CSS. Because your first stylesheet would be read first, it will essentially do the same by overwriting it when the second stylesheet is loaded.