Two types of links in CSS

[bostjank]

Hi!

I have a CSS where I have defined the looks of links

a:link { color=#cc0000; text-decoration: underline }
a:visited { color=#cc0000; text-decoration: underline }
a:hover { color=#006699; text-decoration: none }


What I would like to do is to have another type of links on the page - with different colors and all. How can I do that?

Thanks,
Bostjan

[codefox]

Create a class, as in,

a.link-style1:link { color=#cc0000; text-decoration: underline }
a.link-style1:visited { color=#cc0000; text-decoration: underline }
a.link-style1:hover { color=#006699; text-decoration: none }

a.link-style2:link { color=red; text-decoration: overrline }
a.link-style2:visited { color=green; text-decoration: overline }
a.link-style2:hover { color=blue; text-decoration: none }

Now when you want a link to be of link-style1 use the class attribute as follows:

<A class="link-style1">Link style1</A>

When you want a link to be of link-style2 use the class attribute as follows:

<A class="link-style2">Link style2</A>

[redhead]

remember that in CSS you use a colon instead of an equals mark

so instead of this:


a.link-style1:link { color=#cc0000; text-decoration: underline }
a.link-style1:visited { color=#cc0000; text-decoration: underline }
...etc......


you should be writing this:


a.link-style1:link { color: #cc0000; text-decoration: underline }
a.link-style1:visited { color: #cc0000; text-decoration: underline }

[codefox]

Oh yeah :D