CSS Multiple Style Sheets
When more than one rule targets the same property on the same element, CSS resolves the conflict using order, specificity, and importance to decide which one wins.
The cascade
The C in CSS stands for cascading, the process the browser follows when several rules could apply to one element. Rather than picking at random, it weighs the rules by three things: how the rule got there, how specific its selector is, and where it appears in the source order.
Source order
When two rules have equal specificity, the one that appears later wins. This is why the order of your <link> elements matters: a later stylesheet can override an earlier one.
Order of stylesheets
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">
</body>
</html>Here <theme.css> loads after <base.css>, so where they set the same property, the theme's value takes effect.
Specificity
A more specific selector beats a less specific one regardless of order. An id is more specific than a class, and a class is more specific than a tag name.
Specificity wins over order
<!DOCTYPE html>
<html>
<head>
<style>
p { color: gray; }
.note { color: #00643c; }
#lead { color: navy; }
</style>
</head>
<body>
<p id="lead">This paragraph has the id "lead".</p>
<p class="note">This paragraph has the class "note".</p>
<p>This is a plain paragraph.</p>
</body>
</html>Exercise: CSS How To Add
Which HTML attribute is used to add inline CSS directly to an element?
