Different Color Links On The Same Html Page

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! -Spencer

Solution 1:

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:

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

Demo: https://jsfiddle.net/3L4xguj7/

Update 16.05.2021: Updated link

Solution 2:

You can give the links different classes like:

<ahref="..."class="internal">Link to some internal page</a><ahref="..."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.

Solution 3:

<ahref="http://"style="color: red">RED</a><ahref="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

<ahref="http://"class="red">RED</a><ahref="http://"class="blue">RED</a>

and in your CSS file state

.red {
color: red;
}

.blue {
color: blue;
}

Solution 4:

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:

#Maina { color: #000; }

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

.Messagea { 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:

lia { color: #009; }

You can also specify style directly for a specific link.

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