Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

CSS Links Tutorial

CSS allows you to add effects to hyperlinks. If you do not use CSS, the only other way to add effects to hyperlinks would be to use java script.

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 not case-sensitive.

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.htm">This is a link</a>
</p>
</body>
</html>

Click on CSS Link Example to view the web page the above code produces.


The following CSS code examples show how to add other styles to links.

<html>
<head>

<style type="text/css">
a.linkexampleone:link {color: #ff0000}
a.linkexampleone:visited {color: #0000ff}
a.linkexampleone:hover {color: #ffcc00}

a.linkexampletwo:link {color: #ff0000}
a.linkexampletwo:visited {color: #0000ff}
a.linkexampletwo:hover {font-size: 150%}

a.linkexamplethree:link {color: #ff0000}
a.linkexamplethree:visited {color: #0000ff}
a.linkexamplethree:hover {background: #66ff66}

a.linkexamplefour:link {color: #ff0000}
a.linkexamplefour:visited {color: #0000ff}
a.linkexamplefour:hover {font-family: monospace}

a.linkexamplefive:link {color: #ff0000; text-decoration: none}
a.linkexamplefive:visited {color: #0000ff; text-decoration: none}
a.linkexamplefive:hover {text-decoration: underline}

</style>

</head>

<body>
<p>
<a class="linkexampleone" href="http://freecsstutorial.com">This link changes color</a>
</p>
<p>
<a class="linkexampletwo" href="http://freecsstutorial.com">This link changes font-size</a>
</p>
<p>
<a class="linkexamplethree" href="http://freecsstutorial.com">This link changes background-color</a>
</p>
<p>
<a class="linkexamplefour" href="http://freecsstutorial.com">This link changes font-family</a>
</p>
<p>
<a class="linkexamplefive" href="http://freecsstutorial.com">This link changes text-decoration</a>
</p>
</body>
</html>

Click on CSS Link Example to view the web page the above code produces.

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details