Applying text color via class doesn't work in a VisualForce page

Question

I'm observing a strange behavior in a VisualForce page. I defined a css class and apply it to a couple of elements as follows:

<apex:page>
...
<style>
  .lnk
  {
      color:SteelBlue;
      text-decoration:none;
  }
</style>
...
<a class="lnk" href="/{!item.id}/e?retURL=/{!IRM_id}" target="_parent">Edit</a> 
<apex:commandLink styleClass="lnk" action="{!deleteAttachment}" value="Del">
...
</apex:page>

For some reason the text-decoration style is applied, but the color doesn't change. I'm not very good with css intricacies, can someone explain to me what's happening here?

Answer 1

I think some of styles are applied by Salesforce via JS so the normal order of execution fails. Normally you'd expect first to apply SF styles, then your own additions. I have the same when I need to bypass some specific styling that comes with jQuery plugins.

You might try with !important applied. It works for me, whether it's a right way to do is probably an entirely different discussion...

.lnk {
    color: SteelBlue!important;
    text-decoration :none;
}

Hope someone will point out something obvious & simpler!