Link Colours

tomd1985 · #1 Oct 11th, 2006, 11:28

Hi, basically I have a number of links on a page which I want to have different colours. How do I get so when I define the a: property in the stylesheet it displays the colours intended instead of the the link colour which automatically generates.

I want a number of different links to have different colours, instead of the standard colour set. What do I have to do to <a> tag.

Thanks

moojoo · #2 Oct 11th, 2006, 13:08

a:link {}
a:visited {}
a:hover {}
a:active {}

or...

#foo a {}

#foo a:hover {}

etc etc

ukgeoff · #3 Oct 11th, 2006, 20:00

If you want every link to have a different colour set, then you will have to give each link an id and set up its colour set like the #foo example above.

If you have groups of links that you want to have different colour sets, then set up classes, ie.,

Code: Select all

.foo1 {}

.foo2 {}

etc.

Ryan Fait · #4 Oct 12th, 2006, 02:32

I'll go a little further since you're a beginner. If you wanted some links to be black and underlined, and another red with no underline, this code would do it:

Code: Select all

a.black {
    color: #000000;
    text-decoration: underline;
}
a.red {
    color: #ff0000;
    text-decoration: none;
}

The 'a' refers to the link tag and the '.red' means the class.

Code: Select all

<html>
    <a href="#" class="black">This is a black and underlined link</a>
    <a href="#" class="red">This is a link that's red</a>
</html>

Classes are called on with the class tag, and classes are defined in CSS with a period before the class name.

ceadge · #5 Oct 21st, 2006, 01:25

Just chipping in to say, if the colours have certain meanings, make the meaning the class name. For example, if the red links are red because they're more urgent, make "urgent" the name of your class.

Some more practical advice - along with a million other CSS coders, I was caught out by the fact that if a:hover appears before a:visited in the style sheet, the link remains the a:visited colour even when the cursor is hovering over it. This is because whenever style declarations conflict, the last one listed prevails... but the consequent effect is not the one you'd want, normally. So be careful about your ordering, and swap as necessary.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Colours	alexgeek	Website Planning	15	Dec 18th, 2007 15:11
Colours	crackafaza	Website Planning	5	Sep 13th, 2007 13:27
Alternate Colours	mikka23	Web Page Design	5	Nov 21st, 2006 16:02
Web Safe Colours	Smokie	Web Page Design	17	Sep 11th, 2003 22:10

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Link Colours