Cascading Style Sheets (3)

You will need to upload to your server files a notepad document called style, placed in a new folder called CSS, and it looks like this:

P {
FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
TD {
FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
A {
COLOR: #0000FF;
TEXT-DECORATION: none
}
A:hover {
COLOR: #0000FF;
TEXT-DECORATION: underline
}
A:active {
COLOR: Purple;
TEXT-DECORATION: none
}
.whitelink {
COLOR: #ffffff
}
.whitelink:link {
COLOR: #ffffff
}
.whitelink:hover {
COLOR: #ffffff; TEXT-DECORATION: underline
}
.whitelink:active {
COLOR: #ffffff; TEXT-DECORATION: none
}
.whitelink:visited {
COLOR: #ffffff
}
.redlink {
COLOR: #FF0000
}
.redlink:link {
COLOR: #ff0000
}
.redlink:hover {
COLOR: #ff0000; TEXT-DECORATION: underline
}
.redlink:active {
COLOR: #FF8080; TEXT-DECORATION: none
}
.redlink:visited {
COLOR: #ff8080
}

It look a bit confusing but it's not really! First of all, copy and paste the above into a 'Notepad' document which you can call CSS. If you are unsure where your Notepad files are, click on 'Start', then 'Programs', then 'Accessories'. On the list that opens should be Notepad, click on that and a window will open with File, Edit, Search and Help along the top.

Copy the script into the Notepad page and save it as style. Now open a new folder within your website and call this folder CSS. Place the saved file in this folder! Not sure how to open a new folder? Here's how:

Go into 'My Documents' and find the folder that contains your website. Open this folder. In the top left-hand corner of your browser it should read:

Happily a new folder will now have appeared ready to be re-named. It will have its current name (New Folder) highlighted in blue, just over-type this with the letters CSS and click out of the box so it is successfully re-named.

Did you click out before you had chance to re-name it? Highlight the folder, right-click it and select Rename. Having now (hopefully!) re-named it, double-click the folder to open it, and paste the Notepad script into it. Now go back to your website's folder which should be just one click of the 'up' button on your browser bar. It is isn't it?

Okay so far? Good. Now lets go back to the page you are working on. From now on if you want a link to be a different colour to the standard blue, and dictate the colour of a visited page link, you merely re-name the link from this:

<A href="java.html" onfocus="this.blur()" title="Javascripts" onMouseover="self.status='Click here for Javascripts';return true">Javascripts</A>

To this:

<A class="redlink" href="java.html" onfocus="this.blur()" title="Javascripts" onMouseover="self.status='Click here for Javascripts';return true">Javascripts</A>

Once again I have highlighted the changable areas in red. The saved CSS on the Notepad page will look up the behaviour of any link called 'redlink' and change it accordingly, in this case turn it red!

The 'whitelink' behaves is coded in exactly the same way as the red ones, all you have to do is prefix the command with whitelink instead of redlink!

If you look through the list of commands on the Notepad file you can see that you can change virtually any aspect of the page very easily, from font type and size to the underlining (or not) of links. That's how I can use red and white links on the same page without using the old way which was okay, but didn't allow me to retain the colour after it had been clicked on - at least not very easily!

To overcome the problems encountered with tables, which tend to require a seperate font size and colour for each line, you will also notice that the line starting with TD takes care of that, and everything including within the TD command for a table is automatically written in the font size, colour etc that you dictate.

That was relatively straight forward, but I know what some of you are thinking, 'It's alright for him, he makes these things all day'. True. Any problems, drop me an e.mail and I will try my best to help!