Links mit CSS unterschiedlich gestalten

Oft ist es gewünscht, Links unterschiedlich zu gestalten.

Hier ein Beispiel:
Die CSS Schreibweise für unterschiediche Links

/* Beginn normaler Link */

a {color: #006699; text-decoration:none;}
a:focus {color:#0000FF; text-decoration:underline;}
a:hover {color:#0000FF; text-decoration:underline;}
a:active {color:#0000FF; text-decoration:underline;}

/* Ende normaler Link */

/* Beginn cloud link */

a.cloudlink { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 24px}
a.cloudlink:link { color: #8b0024}
a.cloudlink:active { color: #8b0024}
a.cloudlink:visited { color: #8b0024}
a.cloudlink:hover { color: #000066}

/* Ende cloud link */

Im body geben Sie dann folgenden Link ein:
<a href="#">normaler Link</a>
Das Ergebnis:

normaler Link

Im body geben Sie dann folgenden Link ein:
<a class="cloudlink" href="#">cloud link</a>
Das Ergebnis:

cloud link