CSS problems.

sticky posted this at 21:27 — 24th October 2001.

Joined: Jul 2001

Hi, I wonder if anyone could help me.
By using CSS is it possible to use 2 different colours for links. How can I do this, I have seen it on a few sites before.

Please help as this is driving me crazy.

Thanks, Sticky

mairving posted this at 21:46 — 24th October 2001.

They have: 2,256 posts

Joined: Feb 2001

Pretty easy there, Sticky.

Here is one way:

A { text-decoration:none; 
	 font-size : 11px;
	 color:#} 
A:link { text-decoration:none; 
	 font-size : 11px;
         color:# }
A:visited { text-decoration:none; 
            color:# }
A:active {  text-decoration:none; 
            color:# }
A:hover {
	text-decoration: underline;
	font-size : 11px;
        color:#}

'
Now you can change any of the values above, Also if you notice the hover has an underline on it which you can change or reverse. Some of the tags are a bit redundant but I tend to have best results using all of them.

Hope this helps.

Mark Irving
I have a mind like a steel trap; it is rusty and illegal in 47 states

sticky posted this at 21:58 — 24th October 2001.

They have: 30 posts

Joined: Jul 2001

Cheers mairving, I will go and try it out.

Nice one.

Sticky

taff posted this at 23:54 — 24th October 2001.

They have: 956 posts

Joined: Jun 2001

sticky:

I read your question as wanting two sets of link colours. If that is the case, take mairving's example one step further

A.set1 { text-decoration:none; 
	 font-size : 11px;
	 color:#} 
A.set1:link { text-decoration:none; 
	 font-size : 11px;
         color:# }
A.set1:visited { text-decoration:none; 
            color:# }
A.set1:active {  text-decoration:none; 
            color:# }
A.set1:hover {
	text-decoration: underline;
	font-size : 11px;
        color:#}

A.set2 { text-decoration:none; 
	 font-size : 11px;
	 color:#} 
A.set2:link { text-decoration:none; 
	 font-size : 11px;
         color:# }
A.set2:visited { text-decoration:none; 
            color:# }
A.set2:active {  text-decoration:none; 
            color:# }
A.set2:hover {
	text-decoration: underline;
	font-size : 11px;
        color:#}

then assign your links to class "set1" or "set2"

.....