CSS External Stylesheet

CSS
CSS External Stylesheet
Introduction to CSS (Cascading Style Sheets)

Using Inline External Style Sheets (CSS)
Part II

In Part I of this tutorial we discussed the basics of using Cascading Style 
Sheets in your webpages.  In Part II we are going to discuss 
how to link your webpages to an external stylesheet, and how 
to assign classes to your html tags so you can even more 
control over your websites overall look and feel. 

External Style Sheets

What is an external style sheet? 
An external style sheet is a file that you can
link to your webpages without actually inserting
the code directly into an HTML document. 

Example:

BODY { background: black; font-family: verdana; color:white; 
font-size: 10pt; }
A:hover  { color:yellow;}
A:action { color:red;}
A:link   { color:red; }
A:visited { color:red; }

A.in:link { color:white; text-decoration: none;}
A.in:visited { color:white;}
A.in:hover  { color:red;}
A.in:action { color:maroon;}

Open up a simple text editor like Windows Notepad. Copy and
Paste the above or your own CSS into the new document.
Save the file as "yourstylesheet.css" you can name it anything you 
wish just make sure that it has a ".css" extension.  
Now upload it to your server like you would any other html 
file.  Next insert the following in the <head> tags of the html 
page(s) you wish to link your stylesheet to. 
<link rel="stylesheet" href="yourstylesheet.css" type="text/css">.  
Replace "yourstylesheet.css" with the name of the stylesheet you 
have created.  
 
Why external style sheets?

Because it saves you time in the long run.  If you ever want to make 
changes simply edit the .css file, upload it, and your website is 
instantly updated! You won't have to go through every page inserting 
loads of font tags, or recopying your style sheet several times.  
Plus the search engine spiders will have an easier time going through
your webpage.

Using the "Class" element in your stylesheet.

This is a handy way to use more than one style for your html tags.  
For Example.  
Default Hyperlink Colors
the link colors are red and blue on the mouse over. But what if you
wanted to have a set of hyperlinks on the same page that where green and yellow on mouse over?

I can accomplish this by declaring a class in my stylesheet called "grylw".  
A class can be called anything you wish.  The class always follows the html 
tag you are using it for.  Example: B.nameofclass: {it'sproperty: &value; }. 
Next in the html code of your webpage insert the following:
<B class=nameofclass>Your bold text here</B>

Here is a hyperlink with my grylw class:
Hyperlink with teh grylw class:
Default Hyperlink Colors

A.grylw:hover {text-decoration:strong; color:yellow;}
A.grylw:link  {text-decoration:strong; color:green; }
A.grylw:active {color:white; }
A.grylw:visited {color:green;}

Here is the code for the following example:
<a href="index.html" class=grylw>Hyperlink with teh grylw class</a>:
<a href="/index.html">Default Hyperlink Colors</a>


© 2001 Jason Russo, H.B. Distribution. All rights reserved.
http://thescriptcenter.com 
Jason Russo specializes in JavaScript, Perl Script, CSS, PHP and HTML.  
Get Free Scripts at: http://thescriptcenter.com/
This article may be reproduced in its entirety providing this 
resource box is included.