PUBLISHED: MARCH 05, 2014 – ARTICLE: HOW TO HAVE DIFFERENT COLOR LINKS ON THE SAME PAGE

Have you ever wanted to have different color links on the same page and not sure how it works? Its really quite easy by using our CSS code. Have custom links on the same page with different text colors. Using CSS we can create a new code that will only work on those links. Any other links on your site will remain the same, this could be used to make certain links stand out by changing the link color.

Below is a sample of two links that are using the code:

Best sites to create a website

What is the best way to create a website

The CSS Code

You will need to copy the below CSS code and paste it in to your CSS style sheet.

First link in purple

.gz1{margin-left:0.0em;font-size:24px;font-weight: none }
.gz1:link {
color: #A349A4;
text-decoration: none; 
 }
.gz1:visited {
color: #A349A4;
text-decoration: none;  
 }
.gz1:hover {
color: #c00000;
text-decoration: underline;
 }

Second link in red

.gz2{margin-left:0.0em;font-size:30px;font-weight: none }
.gz2:link {
color: #ED1C24;
text-decoration: none; 
 }
.gz2:visited {
color: #ED1C24;
text-decoration: none;   
 }
.gz2:hover {
color: #000000;
 text-decoration: underline;
 }

The Link HTML Code

Copy the below HTML link code and paste it where you want the link.

First link in purple

<a href="http://www.yourlinkhere.com/" title="Full step be step tutorials on WordPress" onclick="gbar.qs(this)" class="gz1">Learn How To Create a Website using WordPress</a>

Second link in red

<a href="http://www.yourlinkhere.com/seo-silo-structure-in-wordpress.php" title="Tutorials on setting up a silo structure" onclick="gbar.qs(this)" class="gz2">How to create a Silo Structured Website</a>

How to edit the Different Color Links Code

As you can see in the link CSS code we have used “gz1” and “gz1” in the link HTML code. By doing this what ever we change in the CSS code will change the link.

If you would like to change the link colour or link text size all you do is change it in the CSS code.

If you require more different color links copy the CSS and change “gz1” to what ever you want then also change “gz1” to the same as you have used in the HTML part of the link code.

Its easy to have different color links on the same page follow our CSS tutorials.