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.