Paragraph Spacing for specific areas

[DougWD]

I know you can redifine the "P" tag so you can get whatever spacing you want using margins, and I know you can use "line-height" to define how much space is between lines of text, even between the <br> tag, but what if you want to define the sapce between paragraphs in one spcific location, not site wide?

So I guess what I'm asking is how to create a class you can apply seperately to paragraphs of choice:

p.Pspacing
class="Pspacing"

?

[DougWD]

Let me clarify since I'm coming up against this problem again.

I want to adjust the spacing between multiple paragraphs in one section of a website, not redefine the spacing between all paragraphs in the site. Much better :)

[DougWD]

And one mroe thing. I want to redefine SEVERAL paragraphs that preceed each other:
<p>....</p>
<p>....</p>
<p>....</p>
<p>....</p>
and so on.

So instead of having to add the class to each paragraph is the problem. I mean I could create a class like margin-top: 10px, but then I'd have to add that to each paragraph tag. I know there much be a way to apply this to a "block" of paragraphs--wrong terminology probably.

[penders]

One way is to place all your <p> elements (that you want to apply the special style to) inside a <div> element (a container/block) and then create a style in CSS that targets just those <p>'s within the container...

<div class="pcontainer"> 
<p>Blah</p> 
<p>Blah</p> 
<p>Blah</p> 
<p>Blah</p> 
</div> 
.pcontainer p { 
/* Whatever styles you want to apply to your P's */ 
}

[jonrichd]

I think what you want to do is to create a div that encompasses the area you want to use for your changed paragraph spacing, then redefine the p tag for that div.

So, on your page, you would have:

<div id="bigpara">
<p></p>
<p></p>
</div>

and in your stylesheet, you would have

#bigpara p { margin-top:20px; }

Any p tags within the named div will have 20 px top margin automatically.

[DougWD]

Both of you hit the nail on the head. However, I like the class instead of the ID better I think?

Thanks alot!

[DougWD]

OK one problem here. Let's say I have multiple divs named div.MainContianer

and the css for that class is:

div.MainContianer {
font-weight: bold;
padding-top: 30px;
text-align: left;
font-size: 12px;
margin-left: 175px;
}

So now I want to overide the defualt paragraph settings in only one of those divs named: div.MainContianer

The problem is that I don't see how to affect the paragraphs inside that div tag itself, while not affecting others with the same name.

I assume something like:
.NewPragraph p

and then (yes just tried this)

div class="MainContianer NewParagraph"

So that works, but can I do this more eloquently for this type of application? I mean how do I avoid typing NewParagraph to each div I want to use that class with? I'm thinking maybe I'd need to redefine some heading tags maybe?

[penders]

So now I want to overide the defualt paragraph settings in only one of those divs named: div.MainContianer

If you are wanting to overide most of the 'default' settings (in the DIV), then it sounds as if it might be easier to just define another class altogether (as you have done for ".MainContianer"), and use that instead?

OR... if you only want to override a 'subset' of the styles (a colour perhaps)... then yes, you could define a class within a class, as you correctly marked it up in your HTML. However, your CSS would need to be something like:

.main_container .sub_container p { 
color:#f00; 
}

To target all the P's within 'sub_contianer' that are within 'main_container'.

And your HTML would be:

<div class="main_container sub_container"> 
<p>Blah</p> 
<p>Blah</p> 
<p>Blah</p> 
<p>Blah</p> 
</div>

Or even: (To target just the middle two P's in this case)

<div class="main_container"> 
<p>Blah</p> 
<div class="sub_container"> 
<p>Blah</p> 
<p>Blah</p> 
</div> 
<p>Blah</p> 
</div>

NB: By this method, 'sub_container' will always have to be within 'main_container'. If there is no 'main_container' then 'sub_container' will do nothing.

[cmarshall]

Here's what I do. I like to use classic English paragraph indenting, where the first paragraph is not indented, and subsequent ones are.

My CSS looks like this:

p { text-indent: 1em }
p.first { text-indent: 0em }

My XHTML looks like this:

<p class="first">This is the first paragraph, and will not be indented."</p>

<p>This is an indented subsequent paragraph.</p>

I can get a lot fancier in my cWAP pages, where I use <p> tags like <div> tags (cWAP, or WML 1.1, likes <p> tags, so I will often use them in place of <div> tags on pages destined for display on mobile devices).