Having trouble getting multiple styles to work with hover / links etc - css

Question

I am having issues trying to make some changes to my wife's web site. I have set up multiple classes for different hover over colours etc. Eg. Lft menu all navy text except for underline & light blue with hover over, top menu all white text except for underline & light blue with hover over.
I have tried all sorts of things but can't get them to work together. One keeps overriding the other. Any help would be awesome.
The site is live. www.spunkerella.com
here is the code for the style sheet.
<style type="text/css" >
<!--
* { padding: ; margin: 0; }
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
background-color: #17215f;
}
#wrapper {
margin: 30px auto;
width: 900px;
background-color:#ffffff;
border:medium solid #00a9cb;
}
#header {
width: 900px;
float: left;
padding: 0px;
height:250px;
margin: 0px 0px 0px 0px;
background: #ffffff;
}
#leftcolumn {
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 180px;
float: left;
}
#rightcolumn {
float: right;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 5px;
width: 688px;
display: inline;
}
#footer {
width: 900px;
clear: both;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
}
.style1 {color: #17215f}
.style2 {font-size: xx-small}
a:link {
color: #453223;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #453223;
}
a:hover {
text-decoration: underline;
color: #453223;
}
a:active {
text-decoration: none;
color: #453223;
}
.style3 {color: #453223; font-weight: bold; }
.lgfont {color: #453223;}
.style4
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
color: #00a9cb;
}
a:active {
text-decoration: none;
color: #ffffff;
}
.style5
a:link {
color: #17215f;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #17215f;
}
a:hover {
text-decoration: underline;
color: #00a9cb;
}
a:active {
text-decoration: none;
color: #17215f;
}
-->
</style>

Answer 1

When you specify multiple styles for the same attribute in CSS (example here: setting the color to two different ones on hover), it can only choose one of them, so the others have to get overridden. Here is a good resource on CSS styling priority:
http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
Hope this helps!