Why does user agent stylesheet override my styles?

Question

I want a font-size of a 11, but Chrome and Firefox are giving me 16. When I examine the element in Chrome I see and look at the computed property I see:

font-size: 16px;
  table - medium user agent stylesheet
  Style Attribute - 11px
  table - medium user agent stylesheet
  .v11gray - 11px style.css

Under computed styles in Firefox I get:

font-size: 16px
   TABLE[0].style → 11px    element
   .v11gray → 11px  style.css:19

The last three lines are struck out. Why is my css rule being overridden? Are there steps I can take to find out?

Solution 1

This is an outside shot without your code, but the solution when I had the exact same problem. My DOCTYPE statement had gotten fouled up by an errant keystroke, as described in this question. You might want to inspect it visually and/or validate.

Solution 2

This might sound odd, but it helps to check (especially if you aren't using an IDE or one that doesn't do validation on your CSS). You might want to make sure that you have a ; and not a : at the end of your:style; line. Because at a glance, in the inspector the syntax appears to be correct but isn't. So your user agent stylesheet overwrites it. It's one of those "make sure your printer is plugged in" checks. It happens to all of us every once in a while.