Different Color Links on the Same HTML Page

Question

Hi I am trying to have different color links on the same page. I want some links to be blue and some links to be black. I am new to html and CSS so thank you in advance!

Answer 1

<a href="http://" style="color: red">RED</a>

<a href="http://" style="color: blue">RED</a>

As seen above, you simply input style="color: ###" in the a href to set it to whatever you want if you wish to set each individual link. :)

For more general, use

<a href="http://" class="red">RED</a>

<a href="http://" class="blue">RED</a>

and in your CSS file state

.red {
color: red;
}

.blue {
color: blue;
}

Answer 2

You need some way to specify which links should have which style, and there are seveal to choose from. Some examples:

All links that is within the element with id="Main" are black:

#Main a { color: #000; }

All links that is within any element with class="Message" are blue:

.Message a { color: #00f; }

All links that themselves have class="command" are black:

a.command { color: #000; }

All links that are within a li element are dark blue:

li a { color: #009; }

You can also specify style directly for a specific link.

<a href="page.html" style="color:#000;">

Answer 3

just set a class name to ur hyper links <a> and write the CSS according to ur requirement

for Example

CSS

<style>
.red { 
 color : #f00; text-decoration : none;
}

.green { 
 color : #0f0; text-decoration : none;
}

.blue { 
 color : #00f; text-decoration : none;
}

</style>

Markup :

<a href="#" class="red" > Link0 </a>
<a href="#" class="green" > Link1 </a>
<a href="#" class="blue" > Link2 </a>

A simple Demo

Answer 4

CSS:

A.class1 {color:red;}
A.class1:link  {text-decoration: none; color: red;}
A.class1:visited {text-decoration: none; color: red;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: red;}


A.class2 {color:blue;}
A.class2:link {text-decoration: none; color: blue;}
A.class2:visited {text-decoration: none; color: blue;}
A.class2:hover {text-decoration: underline; color: blue;}
A.class2:active {text-decoration: none; color: blue;}

HTML:

<a href="http://www.google.com" class="class1">Google</a>
<a href="http://stackoverflow.com" class="class2">Stackoverflow</a>

Demo: http://cssdesk.com/qukaq

Answer 5

You can give the links different classes like:

<a href="..." class="internal">Link to some internal page</a>
<a href="..." class="external">Link to some external page</a>

And write CSS rules like:

a.internal {
    color: ...;
}

a.external {
    color: ...;
}

a.internal means select all a-elements with class internal.

Learn more about CSS.