How to Use External Style Sheets

Introduction | Create a Style Sheet | Insert the Style Sheet | Edit the Style Sheet




Introduction


CSS files provide browers with information about how pages should be displayed. In HTML, all information about display has to be "hard coded" into HTML files. This information has to be entered over and over again, and if you decide to change one thing, you have to change it on every page. CSS gives web designers a way around this; CSS information is all held within one file, the external style sheet, which is then linked to all of the HTML files. This way, information about display only has to be entered one time. If you decide to change the appearance of something on every page of your website, it only has to be changed in one file.

The one file containing all information about appearance is called an external style sheet. This file has a .css suffix; an example file name is style.css.



Create an External Style Sheet


To create an external style sheet, just open any text editor (such as notepad or editpad). Enter any CSS information you wish to add (or simply leave it blank for now). Save the file with the suffix .css (this may not be on the drop-down menu when you save your file, so just type it in). You can create any name for this file, as long as it has the correct suffix. A common name is style.css



Inserting an External Style Sheet


Inserting your style sheet into your HTML documents is the next step. This should be on every HTML page, to be sure that each HTML file uses the information on the style sheet. There are two different ways to link to your style sheet from your HTML files. The first way uses HTML. It should be placed between the <head> and </head> tags at the top of the page. Make sure you use the correct URL for your style sheet (put the URL where you see "style.css"). 

<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>


The next method is similar, and it also needs to be placed between the <head> and </head> tags at the top of the page. Once again, make sure you use the correct URL for your style sheet (put the URL where you see "style.css"). 

<style type="text/css" title="currentStyle">
	@import "style.css";
</style>




Editing an External Style Sheet


Now you've reached the final step; you're ready to edit your style sheet and change the appearance of your webpage. To edit your style sheet, open the file you created earlier called "style.css". You can now insert any CSS code you'd like into this file, and it will affect all of the HTML files that link to it. Make sure you ONLY use CSS here... no HTML! Here is an example of something you might put into your style sheet. Just copying and pasting this onto your style sheet will make the background of every page aquamarine, the font on every page verdana, and the font size on every page 10px. Now you won't have to use all those <font> tags on your pages! 

body {
	background: #B1D4DB;
	font-family: verdana;
	font-size: 10px;
	}