...

View Full Version : Different colors for links



EricSanchez3099
12-27-2003, 11:37 PM
How would I do the following:

Have text links on a page that are colored "Black". They stay black even when the text links were visited (so it just looks full time black).

Then on the same page, have different text links that are colored Red, and also Red whether they have been visited or not.

I only know how to do this for 1 color.

Any help is appreciated!

Nightfire
12-27-2003, 11:44 PM
<style type="text/css">

a.black{
color:#000;
}

a.red {
color:#ff0000;
}
</style>

...

<a href="page.html" class="black">Black link</a>
<a href="page.html" class="red">Red link</a>

Dieter Rausch
01-02-2004, 08:48 PM
Perhaps you should add the following to your document's head section:

<style type="text/css">

a:link { text-decoration: none; color: black}
a:visited { text-decoration: none; color: black }
a:hover { text-decoration: none; color: red }
a:active { text-decoration: none; color: blue }

</style>

When the mouse is over the link, the link turns red. Once you have clicked on the link it turns blue, until you click elsewhere on the page. Then it will return to black.

You can change "text-decoration: none" to "text-decoration: underline" if you want to have underlined text at some stage.

In addition you can specify the text to appear bold by adding: font-weight: bold, or you can change to a specific font by adding: font 10pt Sans-serif, etc.

I hope this helps.

Regards
Dieter

Nightfire
01-02-2004, 08:51 PM
As he only wanted it to be one colour, I don't see why your post is relavant

EricSanchez3099
01-02-2004, 10:54 PM
So Dieter, in this:

<style type="text/css">

a:link { text-decoration: none; color: black}
a:visited { text-decoration: none; color: black }
a:hover { text-decoration: none; color: red }
a:active { text-decoration: none; color: blue }

</style>


Is it possible to make are a.links......so I can have some text links that are red, and some are blue, etc?

Thanks

Paul Jr
01-03-2004, 12:01 AM
http://www.w3schools.com/css/css_pseudo_classes.asp

Dieter Rausch
01-03-2004, 10:53 AM
Hi Eric,

I have tried to do that by inserting

<style type="text/css">
a:link { text-decoration: underline; color: black; font 10pt Verdana}
a:visited { text-decoration: none; color: black }
a:hover { text-decoration: none; color: red }
a:active { text-decoration: none; color: blue }
</style>

before a number of <a href="page.htm"> links using different colours for different actions, but found that all links reverted to the colours specified in the last insertion. Even if that did work it would be cumbersume. Therefore, for different coloured links in the same document the best option appears to do what Nightfire suggested in his reply.

Also, visit the site that Paul Jr suggests in his reply. There you will find some well documented examples.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum