Home/ Questions/Q 6649207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T00:44:47+00:00

I can not figure out why the below css will not do what it

  • 0

I can not figure out why the below css will not do what it appears to do, if anyone can explain why or help show what I am doing wrong, would greatly appreciate.

<style>
  .button-blue a:link{
   text-decoration: underline overline; color: red!;
   background: #55a4f2!;
   padding: 12px 24px!;
   -webkit-border-radius: 6px!;
   -moz-border-radius: 6px!;
   border-radius: 6px!;
   color: white!;
   font-size: 16px!;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif!;
   text-decoration: none!;
   vertical-align: middle!;
    font-weight:bold!;
}
.button-blue a:hover  {
   background: #1071d1;
   color: #fff;

}
.button-blue a:active  {
   background: #3e779d;
}
</style>

<div class="button-blue">
<a href="dd" class="button-blue">Post Comment</a>
</div>

<span class="button-blue">
<a href="dd" class="button-blue">Post Comment</a>
</span>

http://jsbin.com/etijiz

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It doesn’t do what you expect it to do because you have syntax errors. You appear to have used ! instead of !important. If you remove the exclamation marks it will look a little more like you expected it to.

    Generally it is a bad idea to use !important and if you find yourself using it you probably need to refactor something. It would be a good idea to learn more about how CSS selector specificity works.

    • 0