2

I have this in the external css

body {
   color: #000000;
   font: 12px Verdana !important;
   padding: 0;
   text-align: left;
}

i want to change the font so i am doing:

<body style="font-size:9px ! important;">
Saswat Raj Pandey
  • 75
  • 12

1 Answers1

5

I'm assuming you can't simply change the external CSS file.

This sort of thing is horrible to deal with and you should write the owner of that CSS file a condescending letter. Once you're done with that, you have to win the specificity battle. CSS selectors apply according to which one is the most specific. When !important is used, it means, "screw the specificity of anything else, use me."

However, when two selectors that target the same element both have a property with !important, the specificity kicks back in again (fun huh). Now this sort of war is best avoided (hence the letter and ideally slashing off important from the offending file), but you can do something like the below in your style sheet, which is a more specific selector than just the body tag AND has !important.

html body { font-size:9px !important;}

or 

* body { font-size:9px !important;}

This sort of war is like nuking the body tag from space, so beware the collateral damage of this.

EDIT: Oh by the way inline styles beat out external stylesheets and inline blocks, such as your style attribute, and therefore would work yes, but if you're working on a site with more than one page that technique is obviously painful to maintain. The above approach will allow you to keep the override in an external stylesheet. Cheers.

Harry Robbins
  • 530
  • 4
  • 17
  • Thanks mate that really helped. The main problem i was having is that i couldn't edit the external css which was posing a problem. Now its resolved. – Saswat Raj Pandey Sep 02 '15 at 03:43