html with its own CSS

Question

I have a text file with its own css. Everything in that css works except the link piece. The sharePoint built in css takes over the link and makes it blue color. I wanted the link in the html to be not blue. Any idea why other style in the custom html is not being overwritten but the link one?

a.pagination:link { 
color: FFFFFF;
font-size: 11px;
font-family: sans-serif;
text-decoration: none;
letter-spacing: 2px;
font-weight: 300;
}

Answer 1

The styles are applied in the order that the browser reads them, but you can override that order by inserting !important in your style to make sure it is used no matter what order it comes.

a.pagination:link { color: FFFFFF !important;
    font-size: 11px; font-family: sans-serif;
    text-decoration: none; letter-spacing: 2px; font-weight: 300; }

Answer 2

CSS works in a (C)ascading manner, and the last read, most closely matching rule will be applied. So for instance, an css rule for an id will override the more generic match for a class, which in turn will override any other less specific rules.