If we have multiple CSS files with the same class name, which one's properties is applied?

Frequently Asked Questions jQuery FAQ
1

Question

If we have multiple CSS files with the same class name, which one’s properties is applied?

Answer

If you have two CSS files containing the same class name, then the properties of both will be applied in a sort of combination.

If both class declarations share the same property, then the one for the file that was linked last is applied. Any properties that are declared in only one of the CSS files will be applied.

For example, say that you had the following HTML

...
<link rel="stylesheet" href="file1.css">
<link rel="stylesheet" href="file2.css">
...
<div class="container">
...
</div>

which was linked to the following CSS files,

/* file1.css */
.container {
  color: red;
  font-size: 30px;
}

/* file2.css */
.container {
  font-size: 20px;
  font-weight: bold;
}

The combined resulting CSS properties of the .container class would be as follows,

.container {
  color: red;
  font-size: 20px;
  font-weight: bold;
}