Grow your CSS skills. Land your dream job.

[Solved] Noob problem with changing colors in a div

  • # August 12, 2010 at 6:23 am

    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
    # August 12, 2010 at 6:50 am

    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 :P

    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.

    # August 12, 2010 at 3:14 pm

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

    # August 13, 2010 at 3:21 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".