Advanced css for squidoo - spice up your lens MORE

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>

Throughout my CSS tutorials I have usually used the paragraph tag as a basis for style:

<p style="

This has the effect of styling a whole paragraph. Anything you embed in a paragraph tag (ending with the closing tag of course) will start on a new line and what comes after will be on a new line as well.

If you only want to style a word or a sentence within a paragraph, use the BOLD tag:

<b style="

For example, in this paragraph I've set the background to green, a yellow border and a light-blue color. Doesn't look very well. But this last sentence is totally different. It has a white color and a black background. That's because it's embedded in a BOLD tag. The code follows:

For the paragraph as a whole I used:

<p style="background: green; border: yellow; color: light-blue; font-weight: bold;"> text of the paragraph </p>

For the two sentences in white and black I used:

<b style="color: white; background: black"> text of the sentence </b>

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>

I've experimented with centering and aligning text and pictures, and the only way I can find that works is by adding a text-align property to a paragraph. That is:

text centered

<p style="text-align: center">text centered</p>

Similarly, centering a picture works by adding those codes around the picture. Like this:

<p style="text-align: center"><img src="http://www.somethingorother.com/pictureJPG" /> </p>

This means that if you want to center a picture inside a paragraph, all the text in that paragraph will be centered. For instance if you were to give the paragraph a border, and have that border around all the text under the picture - there isn't a way to only center the picture and not the text. That is: unless of course you use the 'most important thing' module (but that limits the colors of the border to orange).

So here's how to center a picture in a paragraph that has been styled.

Lovely picture, isn't it?

<p style="text-align: center; background: #FCF8C0;border: dotted 2px #ff6600; "><img src="http://www.somethingorother.com/pictureJPG" />
Lovely picture, isn't it?</p>

Instead of using the p use the b tag.

Padding and margin can each go both ways. In fact, all the examples on this page do indent on both sides. If you want to control the indentation on each side individually, remember that indentation starts at the top, then follows the clock: right, below, left.

For instance, if you modify a padding setting like the following, you will have set a padding of 0px on top, 50px on the right, 10px below and 0px on the left:
padding: 0px 50px 10px 0px; put that in place of your usual padding settings and you will have 'indented' on the right.
Similarly, but outside of any background you may have set, you can modify the margin:
margin: 0px 50px 10px 0px;

Unfortunately changes in my personal life, and in the way squidu is managed, have made me decide to stop answering questions on that forum. I'm also too busy to answer questions elsewhere.

I am available for consulting though, but that doesn't come cheap. For $99 you get a month of asking whatever questions you want and advice on your SEO strategy, link building, optimizing your blog etc. SEO consult online publishing.

If you aren't willing to pay up, you'll have to be content to stay updated on my Marketing Spiritual Blog where I am also willing to answer any questions related to the posts. It also contains a free ebook.

I'm active on twitter and facebook.