CSS eignet sich prima, um Hyperlinks zu formatieren und so innerhalb einer HTML-Datei den Links unterschiedliche Farben zuzuweisen. Dazu werden in einem Stylesheet verschiedenen CSS Klassen definiert. Das Stylesheet wird entweder direkt im Quellcode der HTML-Datei im HEAD-Bereich eingefügt oder über eine externe Stylesheet-Datei eingebunden.
So sieht der HTML-Quelltext aus:
<html>
<head>
<title>CSS verschiedene Linkfarben</title>
<style type="text/css">
a.rot:link {color: red; }
a.rot:visited {color: red; }
a.rot:hover {color: black; }
a.rot:active {color: red; }
a.blau:link {color: #0000ff; }
a.blau:visited {color: #0000ff; }
a.blau:hover {color: #000000; }
a.blau:active {color: #0000ff; }
a.gruen:link {color: green; }
a.gruen:visited {color: green; }
a.gruen:hover {color: black; }
a.gruen:active {color: green; }
</style>
</head>
<body>
<a href="#" class="rot">roter Link</a><br>
<a href="#" class="blau">blauer Link</a><br>
<a href="#" class="gruen">grüner Link</a><br>
</body>
</html>
Der Wert "a.rot:link {color: red;}" weist in unserem Beispiel dem Link mit der Klasse "class="rot" die Farbe Rot zu. Anstatt dem "color:red" kann man auch den HEX-Wert "color: #ff0000" angeben.
In unserem Beispiel wurde den Links beim Überfahren mit der Maus noch die Farbe schwarz (color: #000000 bzw color: black) zugewiesen.
Hier noch einmal die Pseudoklassen für Links im Überblick:
:link = Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:hover = Eigenschaften des Links beim Überfahren mit der Maus
:active = für gerade aktive angeklickte Links