How to change webpage link colour?

I know how to change the link colour of all the web pages by having it in the body tag but how do you set two link colours, example on the left side where the menu is, have the links be white, and on the main center where all the info is, have the links there be another colour?

Is it done with some cascading style? If so can you please tell me how?

Thanks!

Yeah, use CSS :p

Say you give the A elements on the left a class of Mint, and the elements on the right a class of Farah, then in the style tag in the head, you'd write something like

Code:

---

.Mint a:link {color: #00ffff; /* plus other styles you want to set */ }
.Mint a:visited { /* ... */ }
.Mint a:hover { /* ... */ }
.Mint a:active ( /* ... */ }
.Farah a:link { /* ... */ }
/*
...etc
*/

---

to set up different styles for the A tag depending on their class. Replace the comments with useful CSS obviously :p I think that's how it works anyway :p


EDIT: You can actually look at the source code for EoFF to see how it works too :p

Code:

---

<style type="text/css">
<!--
a.mint:link {color: white}
a.mint:hover {color: blue}
-->
</style>

Archies code is very close, I give her that but you got the class bit the wrong way round which is an easy mistake.

also the link will look like as follows:
<a href="some address" class="mint">some link</a>

---

I think crono_logical's example will let you do things like

Code:

---

<div class="Mint">
<a href="blah">Hi</a>
<a href="blah">Link</a>
<a href="blah">Another</a>
</div>

---

So you can specify the class of the div (or span, if you want, or whatever is the parent of the a-tags), and all a-tag children of the div will use that style. The way Baloki put it, you'd have to put the class on the a-tags themselves, like

Code:

---

<a href="blah" class="mint">Hi</a>
<a href="blah" class="mint">Link</a>
<a href="blah" class="mint">Another</a>

---

which is rather more typing, and harder to change later, but still a valid way to do things. I'd probably go with the first example, myself.

It still didn't work.

I tried both methods. I already put one style in there and I tried putting both codes inside this style, I also tried putting it in a seperate style tag and the colour of the main link is still white link the menu link.

My code looks something like this:

Code:

---

<style type="text/css"> 
    BODY { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
a:hover{
color:#C98A8E;
}
.Mint a:link {color:#515561}
</style>

---

and then I tried the div tag like Dr Unne said, and also putting the class inside the a href tag.

You have to replace < with &lt; to make the code show up on the MB without being parsed, even if you put it in code tags. Blah. *kicks the VB*

In CSS, there are different ways to specify what a style affects. A word by itself = just a tag. So

Code:

---

a {color:#f00}

---

would affect all a-tags. A word starting with a period, as in .Mint, indicates a class. So

Code:

---

.blahrg {color:#f00}

---

in the stylesheet would affect any tag with class="blahrg". (I don't know why everyone is using the word Mint. You can use any word for a class.) A word starting with a # indicates an id, so

Code:

---

#main {color:#f00}

---

would affect any tag with an id="main".

You can also combine them. When one word follows another word, it means "Any of the second which is a child of the first". So

Code:

---

a .menu {border:0px}

---

would affect any tag which has class="menu", which is INSIDE an a-tag. So

Code:

---

<a href="blah"><img src="blah.jpg" class="menu"></a>

---

would make that img tag have a property of border:0px;

On the other hand, something like a.class means "an a-tag, with a class 'class'". That's probably what you want. So

Code:

---

a.blahg { color: #f00}

---

affects all a-tags which have a class="blahg". Like

Code:

---

<a href="test" class="blahg">test</a>

---

There are a great many rules, and I'm not sure I can go into them all. So yeah, try something like this.

Code:

---

<style type="text/css">
a.blahg {
  color: #f00;
}
a.arf {
  color: #00f;
}
</style>

---

Then

Code:

---

<a href="test1" class="blahg">link1</a>
<a href="test2" class="arf>link2</a>

---

Then the first link should be red and the second one should be blue.

I chose Mint and Farah because of #eoff :p I also closed an unclosed font tag in Sita's sig :p

Hi Sita <3

That Dr Unne, such a great guy.

thanks, it worked. Yeah I don't know that much about css :D

Arche - Thanks, my sig skills suck :D

Hi GokuKid749876 :)