defining two different p styles within a div

I thought I knew how to do this, but...

[bonanza]

I have a div with a few different paragraph styles in it:

<div id=section1>
<p>
blah blah blah
</p>
<p class=style1>
style1 style1 style1
</p>
</div>

The CSS that I think should work looks something like this:

#section1{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#section1 p{
margin 2px 2px 2px 2px;
}

#section1.style1 p{
background-color: #ccc;
border-style: dashed;
border-width: 1px;
}

But with the above html, the second paragraph doesn't adopt the different format.

What am I missing?

thanks

[Stratus42]

Hi bonanza.

try this css:

#section1 p.style1 {
background-color: #900;
border-style: dashed;
border-width: 1px;
}

it works - I can't remember the rules for declaring elements in classes in id's.. but this way of declaring it would specify that only <p>'s of class "style1" part of ID "section1" are subject to the rules.

:-)
Lana

[bonanza]

Parfait!

That works. Thank you Lana.