CSS !important not working

Question

I have the following code and for some reason the !important qualifier isn't working.

<div style="font-family : calibri; font-size: 20pt !important;">
  <ul>
    <li>
      <span style="font-size: 11px;">
        <span style="font-size: 11px;">
          Honey Glazed Applewood Smoked Spiral Ham 
        </span>
        <span style="font-size: 11px;">
          Served with Dijon Honey Mustard and Turkey Roulade
        </span>
      </span>
    </li>
  </ul>
</div>

The span tags are generated for website formatting. I was adding the div tag to change the output to PDF format instead of writing a seemingly overcomplicated find and replace function. Since this hack is for specific regions of code, I can't change the CSS sheet.

Any thoughts would be appreciated.

Answer 1

Give the <div> an id and then add this rule to your CSS stylesheet (or in a <style> tag if you don't want to change the style sheet):

#your_div_id span {     font-family : calibri; font-size: 20pt !important; } 

!important in CSS allows the author to override inline styles (since they have a higher precedence than style sheet styles normally). It doesn't automatically make the style marked !important override everything else.

SEE: The W3C's documentation on CSS Selector Specificity.
Felix's Demo of the markup

Answer 2

A good subject to read up on is CSS Specificity

1. p has a specificity of 1 (1 HTML selector)
2. div p has a specificity of 2 (2 HTML selectors, 1+1)
3. .tree has a specificity of 10 (1 class selector)
4. div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
5. #baobab has a specificity of 100 (1 id selector)
6. body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)