Let's say you want to go creative. You like the orange box idea, but you want to use it with a blue background.

The code for the orange box is:

<p style="border: solid 10px #ff6600; padding: 10px">

Closing tag: </p>

The code for the blue background is:

Opening tag:
<p style="background: #E1E8F2; padding: 15px; margin: 0;">

Closing tag: </p>

To combine you have to look at each piece of the code...

First look at the stuff that is similar in both pieces. Both have the words 'padding' in there. Since you can't have two definitions of padding, you will have to pick one.

Padding is the room between the text and the border. Since it's always good to have space, let's pick the largest number:
padding: 15px.

The rest can just be added back to back, within the <p> (or paragraph) tag. Like so:

<p style="border: solid 10px #ff6600; background: #E1E8F2; padding: 15px; margin: 0;">

your text

closing tag: </p>

The general format is:
<p style=".....">your text here</p>

Which means it's all one paragraph (p).

The border in our example is orange. It's a solid border - in other words, it's one line, not a dashed or dotted line. It's 10 pixels wide.

So I've defined it as:

border: solid 10px #ff6600;

You can change the width of the border by playing with the amount of pixels.

For instance I could make a box with a very wide border by using 100px as width.

<p style="border: solid 100px #ff6600; padding: 10px">

Closing tag: </p>

That doesn't look very good, but it's an option.

Similarly the border might be 'dashed' or 'dotted'.

<p style="border: dashed 10px #ff6600; padding: 10px">

Closing tag: </p>

<p style="border: dotted 10px #ff6600; padding: 10px">

Closing tag: </p>

That dotted border doesn't even look all bad. Let's try it with less width (5px):

<p style="border: dotted 5px #ff6600; padding: 10px">

Closing tag: </p>

Or even less (1 pixel wide)

<p style="border: dotted 1px #ff6600; padding: 10px">

Closing tag: </p>

I've actually used color in two places in our example code.

The border is orange, and the background is blue.

I'm using what's called 'hexadecimal' colors. I get those out of squidoo with the colorzilla addon for firefox.

You can use them in three places in squidoo code:

1. The border of any paragraph (orange in our case)
2. The background to a paragraph or piece of text
3. The color of the text itself.

But CSS also leaves open the option to use color-names.

The border is SandyBrown, and the background is Beige and the text color (just called 'color' in the code) is peru.

<p style="border: solid 10px SandyBrown; background: Beige ;
padding: 15px; margin: 0;color: Peru">

</p>

Several of my examples in my original CSS lens use different font-types.
Opening tag:
<p style="color: #1f94bf; font: 150%/1em 'courier new'; padding:
10px;">

You will notice I started out with color, as explained in my previous bit: this gives the color of the text.

Then comes 'font'. This is a handy tag in which you can define the size of the text and the font itself. In this case I went with:
- 150% larger than usual
- standard distance between lines : 2em would be more distance.
- 'courier new' font

You could change the font to Verdana, 200% and same distance between lines.
Opening tag:
<p style="color: #1f94bf; font: 200%/1em Verdana; padding:
10px;">

This is starting to look a bit crowded, so I upped the distance between lines:

This is starting to look a bit crowded, so I upped the distance between lines
Opening tag:
<p style="color: #1f94bf; font: 200%/2em Verdana; padding:
10px;">

I went back to the colorscheme of earlier with a border which is SandyBrown, a Beige background a peru text color (just called 'color' in the code). Combining that with the font styling of the previous bit, this leads to the following code:

<p style="border: solid 10px SandyBrown; background: Beige ; padding: 15px; margin: 0;color: Peru; font: 150%/1em 'courier new'; ">
</p>

As you can see it's all lumped together in one paragraph:

<p style=".....">your text here</p>

I went back to the colorscheme of earlier with a border which is SandyBrown, a Beige background a peru text color (just called 'color' in the code).

Making it float to the right...

<p style="border: solid 10px SandyBrown; background: Beige ; padding: 15px; margin: 0;color: Peru; font: 150%/1em 'courier new'; float: right; width: 50%;">
</p>

Here 'float: right' means that the whole paragraph goes to the right. Any other content, like this text, goes to the left, taking up whatever space is left.

In order for there to BE actual space left on the left, you should define the width of the paragraph. I usually define widths in percentages. So it's 50% of the total width of squidoo text.

However, you could change that.

floating to the left, width 30%

<p style="border: solid 10px SandyBrown; background: Beige ; padding: 15px; margin: 0;color: Peru; font: 150%/1em 'courier new'; float: left; width: 30%;">
</p>

This works alright, except that it becomes obvious we want more space between the colorful paragraph and the rest of the content.

floating to the left, width 30% - with a MARGIN

<p style="border: solid 10px SandyBrown; background: Beige ; padding: 15px; margin: 10px;color: Peru; font: 150%/1em 'courier new'; float: left; width: 30%;">
</p>

Drop by our SquidU.com forum. Ask for help, don't be stingy, be sure to smile, and we're betting someone will come to the rescue.