Met Pseudo-Classes kun je de linkkleur instellen. Ook kun je verschillende linkkleuren instellen
voor een pagina, dus bijvoorbeeld groene en blauwe links.
Er zijn vier verschillende Pseudo-Classes voor links:
a:link (normale link)
a:visited (bezochte link)
a:hover (de muis staat op de link)
a:active (als je op de link klikt)
Voorbeeld:
<html>
<head>
<title>Voorbeeld van classes</title>
<style type="text/css">
<!--
a:link { color: red }
a:visited { color: yellow }
a:hover { color: purple }
a:active { color: green }
-->
</style>
</head>
<body>
<a href="http://www.glr.nl/">Bezoek het glr!</a>
</body>
</html>
Let op dat de volgorde van belang kan zijn. In een verkeerde volgorde kan het voorkomen dat
de opmaak niet werkt!
Neem de code over en test het resultaat.
Link zonder streep eronder
Wil je de links zonder streep eronder? Dan moet je een eigenschap gebruiken die we al eerder
gezien hebben: text-decoration, met als waarde: none.
Voorbeeld:
a:link { color: red; text-decoration: none }
a:visited { color: yellow; text-decoration: none }
a:hover { color: purple; text-decoration: none }
a:active { color: green; text-decoration: none }
Achtergrond voor links
Ook kun je een achtergrondkleur instellen voor je links, met: background-color.
Voorbeeld:
a:link { color: red; background-color: black }
a:visited { color: yellow; background-color: black }
a:hover { color: purple; background-color: black }
a:active { color: green; background-color: black }
Twee kleuren links
Soms kan het handig zijn om meerdere kleuren links op een pagina te hebben, bijvoorbeeld
voor interne en externe links. Ook dat kan. Stel je wilt blauwe en paarse links op je pagina.
Dat doe je dan als volgt:
<html>
<head>
<title>Twee kleuren links</title>
<style type="text/css">
<!--
a.blauw:link { color: blue }
a.blauw:visited { color: yellow }
a.blauw:hover { color: lime }
a.blauw:active { color: green }
a.paars:link { color: purple }
a.paars:visited { color: yellow }
a.paars:hover { color: lime }
a.paars:active { color: green }
-->
</style>
</head>
<body>
<a class="blauw" href="http://www.glr.nl/">blauwe link!</a>
<a class="paars" href="http://www.glr.nl/">paarse link!</a>
</body>
</html>