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

One, check your HTML to make sure class="read" and class="unread" are being added to your links.

Two, try adding a in your .read and .unread CSS rules:

a.read { /* ... */ }
a.unread { /* ... */ }

If that doesn't work, try adding a space before !important. I don't think this is required, but most examples I have seen include it.

First of all, if you don't want the browsers own history to interfere with your styles then use the :visited pseudo-class to match the style of the non-visited link, then just apply classes manually based on your DB records.

Regarding conflicting styles, it's all about the specificity of the selector, and if two with the same properties conflict (have the same specificity) the last one "wins".

Do this:

a:link, 
a:visited {
    font-weight: bold;
    color: black;
}

a.read {
    color: #444;
}

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.