Question

Is there any reason why CSS declaration won’t display in the browser?

Here’s a sample of my CSS file:

.adv {
color:#47463D;
}

.earnings {
color:#B4FF00;
}

When I do <font class=adv>hello</font>, it works a treat.

When I do <font class=earnings>hello</font>, the color specified for .earnings doesn’t display in the browser.

The page is linked to the correct CSS file.

Answer 1

Chances are somewhere on your page you have a style whose specificity supersedes the .earnings (See this page). CSS is applied by a weight scale, so anything with a higher weight (calculated specificity) takes priority over what you think may be applied.

Best thing to do is use something like Firebug (firefox extension) or Chrome’s inspector to see what style really is applied.

---

Example (And, by the way, CSS order is irrelevant)

<style>
  /* what you think is applied */
  .foo { color: red; }

  /* What is being applied due to specificity */
  #bar .foo { color: green; }
</style>

<span class="foo">.foo</span> <!-- color is red -->

<div id="bar">
    <span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>