Mouseover-Buttons und -Effekte mit CSS

[Pépe #22]

Hallo also ich bin erstmal nach dem vorgegangen was es hier bei selfhtml zu finden gab. In meiner css steht...

.ahome       {
    display:block;
    background-image:url(images/home_inactive.gif);
    width:58px; height:25px }

.ahome:hover {
    background-image:url(images/home_active.gif);
}

.ateam       {
    display:block;
    background-image:url(images/team_inactive.gif);
    width:58px; height:25px
    margin-top:-14px; }

.ateam:hover {
    background-image:url(images/team_active.gif);
}

.aschedule       {
    display:block;
    background-image:url(images/schedule_inactive.gif);
    width:71px; height:25px }

.aschedule:hover {
    background-image:url(images/schedule_active.gif);
}

in der html datei steht

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <p><ahome href="LINK HIER">&nbsp;</a></p>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <p><ateam href="LINK HIER">&nbsp;</a></p>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <p><aschedule href="LINK HIER">&nbsp;</a></p>

die Buttons werden jedoch nicht angezeigt... Jetzt steht dort bei selfhtml außerdem:
Wenn verschiedene Rollovereffekte für verschiedene Buttons gewünscht sind, etwa in einer Menüleiste, dann kann man anstatt a:hover auch #button1:hover oder ähnliches schreiben, um zwischen den Buttons mit Hilfe des id-Attributs zu unterscheiden.

Daher meine Frage... wie muss man Befehl bei HTML aussehen, wenn ich diese 3 mousover Effekte einbauen will...
Hoffe ihr könnt mir helfen! Danke schon einmal im vorraus