There 3 ways to apply CSS to a HTML document.
The order or precedence of how CSS is applied to an HTML is a follows:
- The browser loads CSS from the external stylesheet.
- The in page style sheet is loaded and overwrites any duplicate styles from the external stylesheet
- Any in-line style are applied to the HTML tag overwriting the first two methods.
HTML Code
<html>
<title>CSS for Beginners</title>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
/* tag selector */
h1 {color: red;}
</style>
</head>
<body>
<h1 style="color: blue;">CSS for Beginners</h1>
<p id="intro" class="first">This is the first <em>paragraph</em></p>
<p class="first">This is the second paragraph</p>
<p>This is the third paragraph</p>
</body>