How can I set one style to override another conflicting style in CSS?

Question

I'm displaying links that get marked as read in a database when a user clicks them. I want to style the clicked and unclicked links based on the database information not the user's browser history. So far, when I use:

 10 a:visited {  11   color: #444;  12 }  13  14 a:link {  15   font-weight: bold;  16   color:black;  17 }  18  19 .read {  20   color: #444!important;  21 }  22  23 .unread {  24   font-weight: bold!important;  25   color:black!important;  26 } 

and

<tr class="even">   <td><a class="read" href="example.com">blah</a></td> </tr> <tr class="odd">   <td><a class="unread" href="example.org">foo</a></td> </tr> 

and a link has been visited, but not from this page (it's still marked as unread in the database), I get weird results. For example only the color will work, but the weight won't, etc.

Is it possible to have one style override another when they conflict?

Thanks!

EDIT: updated code to clarify

Solution

 10 a:link,  11 a:visited {  12   font-weight: bold;  13   color: black;  14 }  15  16 a.read {  17   color: #444;  18   font-weight: lighter !important; /* omission or even "normal" didn't work here. */  19 }  20  21 a.unread {  22   font-weight: bold !important;  23   color: black !important;  24 } 

Answer 1

You can use the !important directive. eg.

.myClass {    color:red !important;    background-color:white !important; } 

Place !important after each style as shown above when you need to override any other styles also being applied.