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.
Unterschiedliche Farben für Links mit CSS zuweisen
Der CSS style-Tag sieht in unserem Beispiel so aus:
<style type=“text/css“>
a.rot:link {color: red; }
a.rot:visited {color: red; }
a.rot:hover {color: black; }
a.rot:focus {color: red; }
a.rot:active {color: red; }
a.blau:link {color: #0000ff; }
a.blau:visited {color: #0000ff; }
a.blau:hover {color: #000000; }
a.blau:focus {color: #0000ff; }
a.blau:active {color: #0000ff; }
a.gruen:link {color: green; }
a.gruen:visited {color: green; }
a.gruen:hover {color: black; }
a.gruen:focus {color: green; }
a.gruen:active {color: green; }
</style>a.rot:link {color: red; }
a.rot:visited {color: red; }
a.rot:hover {color: black; }
a.rot:focus {color: red; }
a.rot:active {color: red; }
a.blau:link {color: #0000ff; }
a.blau:visited {color: #0000ff; }
a.blau:hover {color: #000000; }
a.blau:focus {color: #0000ff; }
a.blau:active {color: #0000ff; }
a.gruen:link {color: green; }
a.gruen:visited {color: green; }
a.gruen:hover {color: black; }
a.gruen:focus {color: green; }
a.gruen:active {color: green; }
Die Links werden im Body des HTML-Dokuments folgendermaßen mit der jeweiligen CSS-Klasse angesprochen:
<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>
Der Wert “a.rot:link {color: red;}” weist in dem Beispiel dem Link mit der Klasse “class=”rot” die Farbe Rot zu.
Anstatt dem “color: red” kann man auch den Farb-HEX-Wert mit “color: #ff0000” angeben.
Im Beispiel wurde den Links beim Überfahren mit der Maus – dem Hover – noch die Farbe schwarz (color: #000000 / color: black) zugewiesen: a.rot:hover {color: black; }
Die CSS-Pseudoklassen für Links im Überblick
:link = der normale Link zu noch nicht besuchten Seiten
:visited = damit werden Links zu bereits besuchten Seiten markiert
:hover = Anzeige des Links beim Überfahren mit der Maus
:focus = ein Link der einen Focus erhält z.B. durch die Tabulatortaste
:active = für gerade aktive angeklickte Links
Wichtig ist auch die richtige Reihenfolge der Pseudoklassen: link, visited, hover, focus, active
Andernfalls überschreibt man die CSS-Werte nämlich wieder und sie haben keinen Effekt.
So sähe beispielsweise der HTML-Quelltext dann im Ganzen 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:focus {color: red; }
a.rot:active {color: red; }
a.blau:link {color: #0000ff; }
a.blau:visited {color: #0000ff; }
a.blau:hover {color: #000000; }
a.blau:focus {color: #0000ff; }
a.blau:active {color: #0000ff; }
a.gruen:link {color: green; }
a.gruen:visited {color: green; }
a.gruen:hover {color: black; }
a.gruen:focus {color: green; }
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>