¿Cómo puedo acortar este código de desplazamiento? ¿Y cómo puedo crear un archivo CSS que implemente configuraciones para más de un botón?

Alguien hizo este código para mí y creo que hay algunos bits innecesarios en él.

Este es el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html 
xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" 
/> <title>IS THIS THING ON?</title> <link rel="stylesheet" 
href="./wp-content/themes/cosmicbuddy/_inc/css/screen.css" 
type="text/css" />
</style>
</head> <body>
<a href="<?php bp_send_public_message_link() ?>" class="myButton"><!-- 
button --></a>
</body> </html>

Y este es el archivo CSS al que se refiere también:

   .myButton {
    background: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif) no-repeat;
    border: 1;
    cursor: pointer;
    display: block;
    height: 22px;
    width: 22px;
    margin-left: 5px;
    } .myButton:hover {
    background: url(/wp-content/themes/cosmicbuddy/_inc/images/too.gif) no-repeat;
    }

Ahora tengo dos preguntas:

¿Se puede acortar el primer fragmento de código?

¿Cómo puedo crear un archivo CSS que implemente configuraciones para más de una de estas configuraciones? Al igual que este hace en mi archivo CSS a enlaces:

#userbar #bp-nav li.current a{
   color:#000;
   font-weight:bold;
}
   #userbar #bp-nav li a:hover {
   color: #3193c7; text-decoration: none; 
}

Respuestas a la pregunta(5)

Su respuesta a la pregunta