Moving inline override CSS into a stylesheet

Question

I am trying to override a link style in a parent CSS file someplace that is underlining my button text on hover. I found that by attaching the style I want (text-decoration:none) inline, on the element does the override but I would rather not do that.

Any ideas on how to do this better?

<a href="javascript:void(0);" style="text-decoration:none;" class="nco-approve-btn" data-attr-club-id="14">Approve</a>



.nco-approve-btn {

  background: #ad0a0a;
  background-image: -webkit-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -moz-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -ms-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -o-linear-gradient(top, #ad0a0a, #de5252);
  background-image: linear-gradient(to bottom, #ad0a0a, #de5252);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 11px;
  padding: 5px 7px 5px 7px;
  text-decoration: none;
}

.nco-approve-btn:hover {
  background: #8f1313;
  background-image: -webkit-linear-gradient(top, #8f1313, #731717);
  background-image: -moz-linear-gradient(top, #8f1313, #731717);
  background-image: -ms-linear-gradient(top, #8f1313, #731717);
  background-image: -o-linear-gradient(top, #8f1313, #731717);
  background-image: linear-gradient(to bottom, #8f1313, #731717);
  text-decoration: none;
  color: #ffffff;
}


.nco-approve-btn:link {text-decoration: none; color: #ffffff;}
.nco-approve-btn:visited {text-decoration: none; color: #ffffff;}
.nco-approve-btn:active {text-decoration: none; color: #ffffff;}

Answer 1

Placing the !important keyword after an attribute will give that attribute precedence.

About CSS order of precedence

Answer 2

There is probably some stronger rule in your stylesheet such as

.parent-class .nco-approve-btn{text-decoration:underline;}

Check in developer tools what is the rule, and then make the one for the link without decoration stronger (by adding extra class). You can use !important, but do that only if you are sure you will never ever ever will need the class to have the decoration.