How do I create a paragraph class under the paragraph style in a div

Question

I have all my content with a main div (wrapper-landing) and have created a paragraph style for all <p> tags ( #wrapper-landing p ). I created another class on my <p> tag, but it's not picking up that style. I just showed the style of my original <p> tag.

Check out my jsfiddle. The text that I would like to have different is:

• Find out how our Subaru can help you manage the road

Here's my jsfiddle: http://jsfiddle.net/huskydawgs/k4hq8L7f/23/

Here's my code:

<div id="wrapper-landing">
<p>
    Carter Subaru is your New and Used Subaru car sales headquarters. We also offer the Subaru auto maintenance and repair services that you need in Seattle.</p>
<div class="signup-box">
    <p>
        Find out how our Subaru can help you manage the road</p>
</div>
</div>

Here's my css:

#wrapper-landing {
    width: 916px;
    margin: 0 auto 50px auto;
    padding: 0;
}

#wrapper-landing p {
    color: rgb(102, 102, 102);
    font-family: Helvetica,Arial,sans-serif;
    font-size: 1.1em;
    line-height: 1.6em;
}

.signup-box {
    padding:0 12px; 
    color: #555555; 
    background-color: #F1F1F1; 
    border: #e2e3e4 2px solid
}

    .signup-box p {
        font-family:Helvetica, Arial;
        font-size:1em;
        font-weight:normal;
        color:#2251a4;
        margin: 0 0 2px 0;
        text-align: center;
    }

Answer 1

Edit: Per your most recent comment.

It's still a precedence issue. Try this selector: #wrapper-landing .signup-box p

Answer 2

CSS takes the styling that is most specific for the element you are referring to. In this case, #wrapper-landing p and .signup-box p have the same level of specificity, so it is accepting both stylings and parsing styles from the top down. Meaning that your stylings for #wrapper-landing p get applied first, and only the different css attributes in your signup-box p rule are applied.

In order to apply your signup-box p styling exclusively you have to give it a selector with a higher precedence than #wrapper-landing p so you could do something like:

#wrapper-landing p.rtecenter{
  font-family:Helvetica, Arial;
  font-size:1em;
  font-weight:normal;
  color:#2251a4;
  margin: 0 0 2px 0;
  text-align: center;
}

To read more about specificity in CSS check out this link: http://css-tricks.com/specifics-on-css-specificity/