CSS External

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 your confused, donot worry. We are going to walk you through the whole process.

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.

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 "cssfilename.css" (without the quotes).

Why Use External CSS

•     It keeps your website design and content separate.
•     It 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.