CSS Basics Starters

Using Cascading Style Sheets (CSS)
Designing A Better Website
By: Jason J. Russo

Using Cascading Style Sheets (CSS)
Part I

My first article in a series of articles on designing a better website.  

Why Style Sheets?  
Simple, because by using Style Sheets you can have better control over 
your websites overall look and feel.  Not to mention cutting down the size 
of your page, making it quicker to load.  By creating a style sheet you can 
control many aspects of your page like the fonts, hyperlinks, background colors, 
images, and much more.  Another benefit of style sheets is that they are bandwidth 
friendly.  You can create a simple text file, & upload it just like you would any 
other webpage!  

THE BASICS:
You'll want to place your CSS script inside the <head> tags of your webpages. Personally, I wouldn't worry about it too much because hopefully the vast majority of Internet users are using the more recent versions of either Netscape Navigator or Internet Explorer, but if you're not; upgrade please! It's free and it makes your web surfing a much more pleasurable experience.

To embed a style sheet you need to follow the following simple rule:

htmltag {itsproperty: &value;}

</style>

<STYLE TYPE="text/css">
The Style tag tells the browser that it is no longer HTML rather CSS.  

HTMLTAG:
Any html tag you can think of; BODY, FONT, HR, etc..
 
{itsproperty: &value;}:
All CSS properties must be inside "{}" tags, each property followed by a ":" and a 
value followed by ";".  Example:
<STYLE TYPE="text/css">
<!--// 
H1   { color:red; font-family: Arial; font-size: 16pt; }
//-->
</STYLE>
What the above example states is that anything in the "<h1>" tags of your 
webpage will have a text color of red, Arial font, and 16pt size.  So rather 
than typing "<H1><font color=red face=arial>text here</font> 
</h1>" into your HTML code, all you have to do is type "<h1>your 
text</h1>".

CSS HEADING EXAMPLE


In Part II we will cover linking your style sheets, and more advanced techniques 
of stylesheets.  

Insert the following into the <head> </head>tags of your webpage
to control the link colors of the page. A simple but very popular CSS trick.  
Change the colors to whatever you desire. A:link is the active link 
color, a:hover is when the mouse moves over the link, 
a:action is when the user clicks on the link, and a:visited is your 
visited link color. If you want to remove the underline from your links
simply place the following in the a:link, tag " text-decoration: none; " 
a:link   { color:red;  text-decoration: none;}
<STYLE TYPE="text/css">
<!--//
a:link   { color:red; }
a:hover  { color:blue;text-decoration:none;} 
a:action { color:blue;}
a:visited { color:purple; }
//-->
</STYLE>


EXAMPLE HYPERLINK
© 2001 Jason Russo, H.B. Distribution. All rights reserved.
Get your free scripts and other tips at: http://thescriptcenter.com/ 
Jason Russo specializes in HTML, CSS, Perl, PHP, AJAX and Javascript programming
for the web.  

This article may be reproduced in its entirety providing this 
resource box is included.