Background Color

[Digmen1]

Hi Guys

I have a div with some text in it.
I want to have several paragraphs and am using the <br> tag to separate them.
Is there an easy way to have the paragraphs with a background color but leaving the blank line the same color as main main background that is white ?
All I get at the moment is all of my text and blank lines in one color.

Kind Regards
Digby

[swa66]

Make your paragraphs using <p>...</p> tags (that's what the <p> tag is for).

margin and padding come next:
- a margin pushes the other blocks away, but there's no background color of the element itself under the margin.
- padding is does more or less the same but the background of the element does go under this

Do note that <p> tags in most browsers have a default margin, you might want to reset it.

[Digmen1]

Thanks for that Swa66.

That gave me a better understanding !

[Digmen1]

But what I want is to have several paragraphs in one div (a column) and have a different background color behind each area of text.

I have tried classes, and spans to no avail.

Can someone help me with some simple syntax for my css and my html ?

I have looked at lots of tutorials, but can't find an example of what I want, or one that is easy to understand.

[abidshahzad4u]

Please try this in simple way

<div>
<p style="background-color:#CCCCCC;">Some Text</p>
<p style="background-color:#FFFF00;">Some Text</p>
<p style="background-color:#00FFFF;">Some Text</p>
</div>

[Digmen1]

abidshahzad4u

That worked great!

But now I think I need to use Class somehow as I want to style many paragraphs that way, and it would tedious doing each one like you suggest.

[abidshahzad4u]

<style type="text/css">
.paragraphA { background-color:#cccccc;" }
.paragraphB { background-color:#ffff00;" }
.paragraphC { background-color:#00ffff;" }
</style>

<div>
<p class="paragraphA">Some Text</p>
<p class="paragraphB">Some Text</p>
<p class="paragraphC">Some Text</p>
</div>

if you have external CSS file then use <link type="text/css" rel="stylesheet" href="style.css" /> to include the CSS file.

[simonuk]

Let's say your div holding the text is called "dig"

All you would need to do is this:

In the CSS:

#dig p {background-color:red;}

In the html:

<div id="dig">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>

[Digmen1]

Thanks very much guys, I am away now !