CSS Links

CSS / By
With CSS you can add effects to hyperlinks. If you do not use CSS, the only alternative way to add effects to hyperlinks would be to use JavaScript.
A hyperlink has four states that it can be in. CSS allows you to customize each state that it is in. It is also necessary to write the code in the order in which they appear for the link(s) to work properly.
 
a:link {color: #000000}
defines an unvisited link
a:visited {color: #000000}
defines a visited link
a:hover {color: #000000}
defines a mouse over link
a:active {color: #000000}
defines a selected link
 
Some things to note and remember:
a:hover has to come after a:link and a:visited in the CSS definition in order to work as it should
 
a:active has to come after a:hover in the CSS definition in order to work as it should.
 
 
Pseudo-class names are case-insensitive.
 
Adding Colors to Links
The following CSS code example shows how to add different colors to a hyperlink.
 
<html>
<head>

<style type=”text/css”>
a:link {color: #FF0000}
a:visited {color: purple}
a:hover {color: blue}
a:active {color: #000000}
</style>

</head>

<body>
<p>
<a href=”examplelink.php”>This is a link</a>
</p>
</body>
</html>
 
Click on example to view the page produced by above code.
 
 
Remove underline of links
 
A frequently asked question is how to remove the underlining of links?
People are used to blue underlined links on web pages and know that they can click on them. So, you should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website significantly. Even my granny knows that! If you change the underlining and color of links there is a good chance that users will get confused and therefore not get the full benefit of the content on your website.
 
That said, it is very simple to remove the underlining of links. To determine whether text is underlinedor not, the property text-decoration can be used . To remove underlining, simply set the value of text-decoration to none.
a
{
text-decoration:none;
}
 
Alternatively, you can set text-decoration along with other properties for all four pseudo-classes.
 
<html>
<head>
<title>CSS Link Example</title>

<style type=”text/css”>
a:link {
            color: blue;
            text-decoration:none;
}

a:visited {
            color: purple;
            text-decoration:none;
}

a:active {
            background-color: yellow;
            text-decoration:none;
}

a:hover {
            color:red;
            text-decoration:none;
}
</style>

</head>

<body>
<p>
<a href=”#”>This is a link</a>
</p>
</body>

</html>
 
Click on example to view the page produced by above code.
 
 
UPPERCASE and lowercase
 
Property text-transform, which can switch between upper- and lowercase letters. This can also be used to create an effect for links:
 
<html>
<head>
<title>CSS Link Example</title>

<style type=”text/css”>
a:link {
            color: blue;
            text-decoration:none;
}

a:visited {
            color: purple;
            text-decoration:none;
}

a:active {
            background-color: yellow;
            text-decoration:none;
}

a:hover {
            color:red;
            text-decoration:none;
            font-weight:bold;
            text-transform:uppercase;
            background-color:pink
}
</style>

</head>

<body>
<p>
<a href=”#”>This is a link 1</a> <br />
<a href=”#”>This is a link 1</a> <br />
<a href=”#”>This is a link 1</a> <br />
<a href=”#”>This is a link 1</a> <br />
</p>
</body>

</html>