[Solved] Noob problem with changing colors in a div

[Danny9]

Hi,
I know I solved this newbie/basic problem years ago but today I am hung over and it’s defeating me – need to go out for a walk in a minute an get some fresh air :D

I’m expecting this code:

p {
color: green;
}
.para {
color: blue;
font-weight: bold;
}

…

<div class="para">
<p> this text should be blue, right?</p>
<p> This should also be blue <p>
</div>

to give me blue paragraphs in that div but they are staying green as set with the first P style. The paragraphs are coming out bold and green, not bold and blue. Want to over ride the green P. I’m missing something but what (possibly my brains!) ?

[Bob]

Change your css code to:

Code:

p {
color: green;
}
.para p {
color: blue;
font-weight: bold;
}

That will get you <p> text in the .para div blue, but all other <p> text on your page will remain green. Or you could just delete that whole

Code:

p {
color: green;
}

css part

Also, you missed a forward slash ( / ) in your html code, in your closing <p> tag, but that has nothing to do with the color being green or blue.

[virtual]

You’ll find the reasons for this in Chris’ article
https://css-tricks.com/specifics-on-css-specificity/

[Danny9]

Thanks for your answers folks – that was a real life saver yesterday Bob.

have returned to CSS after a couple of years away from it and lots of the stuff I used to know before has been forgotten plus there’s millions more things to catch up on with Jquery etc.

[Author]

Posts