Webmaster Forum / HTML, CSS, Scripts / CSS / February 2007

Hey there,

In my html file I use a <div class="quote">.
In my css file I define .quote
I need to specify the margins for <p> inside the <div>
Today I learned that I can do this using

.quote p {
 margin-top: 5px;
 margin-bottom: 5px;
}

All is well. Now inside this <div class="quote"> I want to be able to
have a couple of <p> blocks use different, bigger margins. So I define
a new class

.quote-walsch {
 margin-top: 15px;
 margin-bottom: 15px;
 color: red;
}

and hope to use it using <p class="quote-walsch">

However, this doesn't work.
The <p> as redefined for class "quote" overrides the margins for class
"quote-walsch", effectively disabling those margin settings. The color
"red" does apply so the class is in effect, but he margins get
overridden. If I apply the new margins using an inline style attribute

<p style="margin-top: 15px; margin-bottom: 15px;">

then it does work.

So as far as I can see, I can do one of two things.

1) do not use classes for the bigger-margin <p> blocks but use inline
style attributes
2) do not define ".quote p" but instead define ".quote-p" and apply
this class to every regular p block using <p class="quote-p">.

I would like to use ".quote p" AND apply bigger margins to several <p>
blocks using classes. Is this possible? All browsers I use (IE4,
Opera7, FF2) behave the same.