CSS rule isn't applying.

Question

I have the following markup and CSS:

<div id="contactarea">
                <p class="heading">Anuncios Premium</p>
                <p class="tag">Asegure que su venta se complete!</p>
            </div>

#contactarea
{
    min-height:150px;
    border:1px solid cyan;
}

#contactarea p .heading
{
    Color:Yellow;
    background-color:Green;
}

#contactarea p .tag
{
    min-height:150px;
    border:1px solid cyan;
}

The contactarea alone is working, the cyan border displays, but the font color of the p doesn't work.

Thanks!

Answer 1

Too many spaces:

#contactarea p.heading

The way you've got it, it means "any element with class 'heading' that is a descendant of a <p> element that is a descendant of the element with id 'contactarea'". Thus it didn't affect the <p> tags themselves.

The SelectORacle site is a great friend!

Answer 2

Get rid of the extra spaces. #contactarea p .heading should be #contactarea p.heading.

Answer 3

This isn't an answer to your direct question but it may be helpful to you in the future. First, if you find that one rule is superceding another, pay attention to the natural priority of CSS rules within a stylesheet and for the prioritization of inline css > external css. Second, if you ever want a rule to take priority, you can do:

#contactarea p.heading { color:yellow !important; }