CODEWITHSUNDEEP
htmlcsslayout
delete
delete

Reputation:

CSS rule isn't applying

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!

Upvotes: 0

Views: 116

Answers (3)

sscirrus
sscirrus

Reputation: 56719

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; }

Upvotes: -1

EAMann
EAMann

Reputation: 4146

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

Upvotes: 1

Pointy
Pointy

Reputation: 413702

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!

Upvotes: 6

Related Questions