CSS Multiple Link Styles

CSS Multiple Link Styles

CSS Multiple Link Styles

This is how we can set a universal appearance on all of the links on your website. If you are linked to a style sheet you can change the link appearance on all of your web pages at once using your style sheet to specifically target the a tag.
Add the following code to your style sheet, save it, then view text links on your site.

CSS CODE EXAMPLE

a {
    font-size: 12px;
    color: #990000;
}
a:link {
    text-decoration: underline;
}
a:visited {
    color: #990000;
    text-decoration: underline;
}
a:hover {
    color: #FF0000;
    font-weight:bold;
    text-decoration: none;
}
a:active {
    color: #990000;
    text-decoration: underline;
}

What if you need a set of links to look different from all others?
Create another set of link styles inside your style sheet.

CSS CODE EXAMPLE

.linkStyle2 a {
    color: #999;
    text-decoration: none;
}
.linkStyle2 a:link {
    color: #999;
    text-decoration: none;
}
.linkStyle2 a:visited {
    color: #666;
    text-decoration: none;
}
.linkStyle2 a:hover {
    color: #CCC;
    text-decoration: none;
}
.linkStyle2 a:active {
    color: #999;
    text-decoration: none;
}

Then you can wrap all of the alternative link elements inside of a span element with a class of 'linkStyle2' for instance, or you can place the class name directly in the link elements. These will look different from the default link appearance that your website has, on any pages you need them to display in.

click here to code. 

Tweet