CSS External Stylesheet
An external CSS stylesheet can be applied to any number of HTML documents by placing a <link> element in each HTML document.
The attribute rel of the<link> tag has to be set to "stylesheet", and the href attribute to the relative or absolute
path to the stylesheet. While using relative URL paths is generally considered good practice, absolute paths can be
used, too. In HTML5 the type attribute can be omitted.
It is recommended that the
<link> tag be placed in the HTML file's
<head> tag so that the styles are loaded before
the elements they style. Otherwise, users will see a flash of unstyled content.
css_document.html
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type= "text/css" href= "style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I like CSS</p>
</body>
</html>style.css
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}Make sure you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your HTML file then no path is required (like the example above) but if it's saved in a folder, then specify it like this href="foldername/style.css". External stylesheets are considered the best way to handle your CSS. There's a very simple reason for this: when you're managing a site of, say, 100 pages, all controlled by a single stylesheet, and you want to change your link GoalKicker.com – CSS Notes for Professionals 3 colors from blue to green, it's a lot easier to make the change in your CSS file and let the changes "cascade" throughout all 100 pages than it is to go into 100 separate pages and make the same change 100 times. Again, if you want to completely change the look of your website, you only need to update this one file. You can load as many CSS files in your HTML page as needed.