CSS Basics

Cascading style sheets, basically allow you to control the look of a webpage through linking it to an external .css file. This makes it really easy to format multiple pages by editing one style sheet that they all link to instead of having to editing ever single page individually.

To link to an external style sheet put this between the <head> and </head> tags of your html page.

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

Then create a new file in notepad and save it as "styles.css"

It is in this styles.css file that you will put your css styles that will contol the look of your html pages.

Instead of explaining what to put in your css file I will just show you what some of the elements inside mine look like.

Element
Explaination
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #ffffff;
text-decoration: none} 		.sitetxt contols how all the normal text on my pages will look. Like this text that you are reading now. You can change the font, size, colour, background and decoration (i.e. under line) of the text here.
A:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: #999999;
TEXT-DECORATION: none;
font-weight: bold
}		 A:link controls text links and has similar attributes as sitetxt
A:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
BACKGROUND: none transparent scroll repeat 0% 0%;
FILTER: blur;
CURSOR: crosshair;
COLOR: #ffffff;
HEIGHT: 0px;
TEXT-DECORATION: none;
font-weight: bold
}		 A:hover controls how a text link will look when the mouse moves over it.
A:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: #999999;
TEXT-DECORATION: none;
font-weight: bold
}		 A:visited controls what a text link will look like after it was been visited.