Browsers will parse your content from top to bottom. Knowing this, when it comes to priorities between different CSS calling methods, think of how far the call is from the content. Styles cascade down to your HTML, much like a waterfall to a riverbed.
In terms of priority, CSS style sheets apply styling from furthest away. Next, there's internal styling, which is placed in one style-tag above your HTML content, followed by inline styling, which is closest to your HTML. Should there be competing styles, the style rules closest to the HTML will take priority.
If you call two files, any conflicts encountered will follow the second file's rule. Keep in mind though, that only duplicate properties on duplicate selectors will have a conflict. This is why specificity in choosing your selectors is important!
Use the activity below to review styling priority. Using the sample code as a reference, place each labeled styling method in order of priority, with highest priority first and lowest priority last.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Example Page</title>
<!--CSS File-->
<link rel="stylesheet" type="text/css" href="css/MainStyling.css"/>
<link rel="stylesheet" type="text/css" href="css/SpecialFeatures.css"/>
<style>
.highlight {
background-color: pink;
}
</style>
</head>
<body>
<h2 style="color: navy;">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad <span class="highlight">minim veniam</span>, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. </p>
<p>Duis aute irure dolor in <span class="highlight">reprehenderit
in voluptate</span> velit esse cillum dolore eu fugiat nulla
pariatur. </p>
</body>
</html>
style="color: navy;"
.highlight { background-color: pink; }
SpecialFeatures.css
MainStyling.css
