Using External Style Sheet

Lesson-5 (Using External Stylesheet)

Well, suppose you would like to be able to use one group of styles- but you want to use them on many pages at once. This can be done through the use of external style sheets.

To begin, open your text editor and create a new blank document. Now, type in just the following information:

DIV { font-family:Arial }
.redfont { color:red }

Now, save the file as "style1.css" (You can use any name you wish, just be sure you have the .css extention at the end).

To link to a style sheet, you need to add the <LINK> tag inside the head section of your html document. Here is the general form:

The rel="stylesheet" attribute just says to look for a stylesheet. The type="text/css" tells the browser the mime type of the document, which is a cascading style sheet. The name=" " attribute allows you to give the style sheet a name if you wish. The href=" " attribute is where you place the url of the style sheet. You can use an absolute or relative url, as long as you point the browser to the .css file you wish to use.

Now, open up an HTML file you would like to add these styles to. Go to the HEAD section of that page (between the <HEAD> </HEAD tags). Now, type in the following HTML to link to the style sheet you created a minute ago: (Be sure both files are in the same directory)

You must add the LINK tag to every page that you want to use the style sheet on. If you don't, some of your pages will not work correctly, and that messes up what you wanted to do.

Now, any time you use the DIV tag in one of your pages linking to the style sheet, you will get an Arial font:

<DIV>I am Arial!</DIV>

And....

I am Arial

And when you use the "redfont" class, you will get a red font:

This line is <SPAN class="redfont">really</SPAN> important!

And....

This line is really important!

Now you can go back and create your own styles and make all kinds of nice things happen on your pages.