Dans ce style, nous avons ajouté une règle de style aux hyperliens créés avec l'élément <a>.
Dans cet exemple nous voyons apparaître les "pseudo-classes" :link, :visited et :hover après la classe ".navbar".
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma première page avec du style</title>
<style type="text/css">
body { font-family: Georgia, "Times New Roman", Times, serif;}
body { background-color: #6CF; color: #00F; padding-left: 9.5em; }
h1 { font-family:Helvetica, Geneva, Arial, sans-serif; }
ul.navbar { position:absolute; top:4em; left:1em; width:8em; }
ul.navbar li { background:white; margin:0.3em 0; padding:0.3em;
border-right:1em solid black; }
ul.navbar a { text-decoration:none; }
li a:link { color:blue; }
li a:visited { color:purple; }
li a:hover { color:red; text-decoration:underline; }
</style>
</head>
<body>
<ul class="navbar">
<li><a href="ex0.html">Sans style</a></li>
<li><a href="ex1.html">Avec style (1)</a></li>
<li><a href="ex2.html">Avec style (2)</a></li>
[etc.]
<address>Fait le 5 juin 2011</address>
</body>
</html>
Nous allons à nouveau modifier le style en utilisant les propriétés du CSS pour tirer un trait pointillé au-dessus de la date en évitant d'utiliser la balise html <hr />.
Exemple suivant ... Avec style (4).