CSS Link behaviour doesn't work

i have implemented a slider from menucool.com with no problem. Looking good!

Besides the css sheet and a jscript sheet for the slider I received a style sheet called generic.css which controls aspects of the page that don’t relate to he slide show. I want to edit the generic.css to control the links, hover colour, etc
Doesn’t seem to matter what I do the default is all that works, links are underlined. This is because the html page ignores my instructions and defaults to underlined links. I had visited and active but i don’t need them. It did not work when they were there either.

I want to add something like this

a:link {color: blue; text-decoration: none; }
a:hover { color: orange; text-decoration:underline;}

to what is already there, which is this:

body {background:#F6F6F6;font:normal 0.8em Verdana; margin:0; padding:0; padding-bottom:60px;
a:link {color: #red; text-decoration: none; }
h2 {display:inline;}
.div1, .div2 {width:980px;margin:0 auto;}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;}
.green {color:Green;}
.cn {font-family: “Courier New”, Georgia;}
#status {display:inline-block; margin-left:26px;line-height:50px;height:50px;vertical-align:middle;}

border: dashed 1px #BCBCCB; padding:8px 12px; background-color: #F3F3F9; white-space:pre; font-family:“Courier New”, Georgia;
font-size:12px; margin:6px 0;overflow:auto;

If i remove the link to generic.css from the web page the font defaults to times new roman so i know the page IS referencing the style sheet.
Help is appreciated.

Hi there,

It’s probably just a typo, but color: #red won’t work.
It has to be color: red or color: #FF0000


a:link {color: blue; text-decoration: none; }

will affect the style of all of the links in your document (unless they have been specifically styled otherwise).
Obviously you can only do that once.

You can however, drill down your CSS selectors to style links on different parts of the page differently.
Have a look at the following example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Link styling example</title>
      .special a{color:yellow;}
      #special a{color:green;}

    <p><a href="#">A link</a> Some interesting content</p>
    <p class="special"><a href="#">Link two</a> Some more interesting content</p>
    <div id="special"><a href="#">Link three</a> Even more interesting content</div>
    <a href="#">Another link</a>

Can you see how we set the default link colour to red with this a{color:red}, then by using .special a{color:yellow;} we can style all of the links contained within an element which has a class of “special” differently, and finally using #special a{color:green;} we can style all of the links contained within an element which has a id of “special” differently again.

You should be able to use this to do what you want.
But if you still can’t get it to work, post a link to your page and I’ll gladly have a look.