File Creation
Let us get started by making that external CSS file. Open up notepad.exe, or any other plain text editor and type the following CSS code.
CSS Code:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
Now save the file as a CSS (.css) file. Make sure that you are not saving it as a text (.txt) file, as notepad likes to do by default. Name the file "test.css" (without the quotes). Now create a new HTML file and fill it with the following code.
HTML Code:
<html>
<head>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3> A White Heading </h3>
<br />
<p> This paragraph will have a blue font. <br />
The background color of this page will be gray because<br />
we changed it with CSS! </p>
</body>
</html>
Then save this file as "index.html" (without the quotes) in the same directory as your CSS file. Now open your HTML file in your web browser and it should look something like this.
This paragraph has a blue font. The background color of this page is gray because we changed it with CSS!
Why Use External CSS?
• 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.
