Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/load_globes.php on line 22

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/thescrip/public_html/jclass/load_globes.php:22) in /home/thescrip/public_html/jincludes/globals.php on line 43

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/thescrip/public_html/jclass/load_globes.php:22) in /home/thescrip/public_html/jincludes/globals.php on line 43

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/load_globes.php on line 22

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61
CSS External Stylesheet
TheScriptCenter.com


print page

CSS Style Sheets Basics


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 

tags of the html page(s) you wish to link your stylesheet to.

. 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:
Your bold text here

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:
Hyperlink with teh grylw class:
Default Hyperlink Colors


© 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.