Use External CSS
Quoted from http://www.tizag.com/cssT/external.php
What's external CSS
When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>. If you're confused, don't worry. We are going to walk you through the whole process.Example
This is a html file named index.html: 1 <html>
2 <head>
3 <link rel="stylesheet" type="text/css" href="test.css" />
4 </head>
5 <body>
6 <h3> A White Header </h3>
7 <p> This paragraph has a blue font.
8 The background color of this page is gray because
9 we changed it with CSS! </p>
10 </body>
11 </html>
Make sure save this file as "index.html" (without the quotes) in the same directory as your CSS file.
2 <head>
3 <link rel="stylesheet" type="text/css" href="test.css" />
4 </head>
5 <body>
6 <h3> A White Header </h3>
7 <p> This paragraph has a blue font.
8 The background color of this page is gray because
9 we changed it with CSS! </p>
10 </body>
11 </html>
Make sure save this file as "index.html" (without the quotes) in the same directory as your CSS file.
Why use external CSS file?
- It keeps your website design and content separate.
- It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
- You can make drastic changes to your web pages with just a few changes in a single CSS file.
