selector.class:psuedoclass { property: value }
a { text-decoration: none; border: 1px solid #000000; margin:5px; padding:5px; }
a:hover { background-color: #66cdaa; text-decoration: none; }
a:focus { background-color: #66cdaa; text-decoration: none; }
a:active { background-color: #66cdaa; text-decoration: none; }
a.red { text-decoration: none; color:#ff0000; }
a.red:hover { background-color: #00ffff; text-decoration: none; }
a.red:focus { background-color: #00ffff; text-decoration: none; }
a.red:active { background-color: #00ffff; text-decoration: none; }
a.blue { text-decoration: none; color:#0000ff; }
a.blue:hover { background-color: #ffff00; text-decoration: none; }
a.blue:focus { background-color: #ffff00; text-decoration: none; }
a.blue:active { background-color: #ffff00; text-decoration: none; }
a.green { text-decoration: none; color:#00ff00; }
a.green:hover { background-color: #ff00ff; text-decoration: none; }
a.green:focus { background-color: #ff00ff; text-decoration: none; }
a.green:active { background-color: #ff00ff; text-decoration: none; }
a.yellow { text-decoration: none; color:#ffff00; }
a.yellow:hover { background-color: #0000ff; text-decoration: none; }
a.yellow:focus { background-color: #0000ff; text-decoration: none; }
a.yellow:active { background-color: #0000ff; text-decoration: none; }
<a href='#'>plain</a>
<a class='red' href='#'>red</a>
<a class='green' href='#'>green</a>
<a class='blue' href='#'>blue</a>
<a class='yellow' href='#'>yellow</a>
Trivial example, but yes it is easy to do