How is the * CSS rule more specific than a class or ID style rule?

Question

I'm using a * selector to indicate that unless I specify otherwise, the color of the font on a website should be set to a certain value.

*{

font-family:"Verdana";
color: #04468e;
}

So far so good. The problem is that that's the most general of rules, and it should get readily overridden, for example by

#profileMessageBoxHeader
{
background:url('images/profileMessageHeaderGradient.png') repeat-x #208ff6;
height:178px;
border-radius:10px 10px 0px 0px;
color:#fff; 
}

So the following code...

<div id="profileMessageBox">
    <div id="profileMessageBoxHeader">
        <
        <p>Please fill out the form and click submit.  Your entered profile data will be provided to the tutor, to allow them to contact you.</p>
    </div>
</div>

Should produce white text. For some reason, however, the extremely general * rule is overriding the more specific ID rule. Why?

Answer 1

The * is a universal selector and overriding the settings on #profileMessageBoxHeader. It's the same as manually setting BODY, H1, P, TABLE, TR, TD, TH, PRE, UL, LI, ETC. For more information on it and how it can circumvent inheritance, Eric Meyer has a good article.

Apply the following and it should work:

#profileMessageBoxHeader p
{
    color: #FFF;
}

Sample: http://jsfiddle.net/x7AnM/

Answer 2

As far as I know an element outweighs an id (search CSS weight for more info) and * specifies (all) elements, so add the element div in your rule, e.g. div#my_id