CODEWITHSUNDEEP
css
RandomPerson
RandomPerson

Reputation: 790

Button not taking css attributes

So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.

I'm working with bootstrap, here is the css of the button:

.btn-primary {
   background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
   color: #ffffff;
   font: 17px "bowlby_oneregular",sans-serif !important;
   font-weight: bold;
   text-transform: uppercase;
}

I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works

Upvotes: 1

Views: 87

Answers (1)

Sebastian Simon
Sebastian Simon

Reputation: 19505

There are two solutions:

Remove !important:

font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;

Split the shorthand property up:

font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;

The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.

Upvotes: 2

Related Questions