Squidoo CSS Borders

There are limitations on Squidoo preventing you from creating more advanced CSS designs. However, the limitations will not prevent you from making very creative, visually interesting enhancements to your lenses.

You cannot use brackets { or } within your lens. This prevents you from being able to use CSS in the more traditional sense, by assigning the values via a selector, externally, etc. This, I believe, is because we are allowed to use inline CSS (meaning via an HTML tag), which overrides the the CSS that would otherwise be controlled by Squidoo. You are free to use CSS within the text fields, as long as it is used as part of an HTML tag, using the style attribute. This is known as Inline CSS

So, you can use CSS in the following manner:
Use Tags, such as <p> or <b>. For further info, please see Basic HTML for HTML that you can use on Squidoo.

Next, you must use the HTML style attribute. It would be used as such <p style=", with the CSS properties enclosed by a " (quotation) and a > (greater than sign).

Each CSS property must include a : (colon) and then the value, such as a pixel size, color or font weight.
Each CSS set of properties is then separated by a ; (semicolon).

A very basic example would be

There are many different border line values that you can use.
Example: border-style: value;

Values:

* dashed
* dotted
* double
* groove
* inset
* outset
* ridge
* solid

You may use any color format to dictate the color of the border.

Example: border-color: value;

Values:

* color name
* hexadecimal number
* RGB color code
* transparent

*See HTML Tips for Color for a bunch of color choices.

A solid border line

Use the following code:

<p style="border:4px solid #1a67b8;">A solid border line</p>

More Information and examples on Solid Line CSS Borders.

A dotted border line

Use the following code:

<p style="border:4px dotted blue;">A dotted border line</p>

For more examples, please see Dotted Line CSS Borders

A dashed border line

Use the following code:

<p style="border:4px dashed #1a67b8;">A dashed border line</p>

A double border line

Use the following code:

<p style="border:8px double #1a67b8;">A double border line</p>

A ridge border

Use the following code:

<p style="border-width:8px;border-style:ridge;border-color:blue;">a ridge border</p>

Ridge border on bottom

Use the following code:

<p style="border-bottom:10px ridge blue;">Ridge border on bottom</p>

Groove border

Use the following code:

<p style="width:200px;height:50px;border:8px groove blue;">Groove border</p>

A double bottom border

Use the following code:

<p style="border-bottom-width:8px;border-bottom-style:double;border-bottom-color:blue;">A double bottom border</p>

A double top border

Use the following code:

<p style="border-top-width:8px;border-top-style:double;border-top-color:blue;">a double top border</p>

An inset border

Use the following code:

<p style="border:8px inset blue;">An inset border</p>

An outset border

Use the following code:

<p style="border:6px outset blue;">An outset border</p>

Dashed border on left

Use the following code:

<p style=" border-left: 3pt dashed blue;">Dashed border on left</p>

Use the following code:

I cleaned it up a bit to make it easier to understand.

<p style="border:12px outset #6c4f25; height:150px; width:250px;"><a href="THE URL OF THE PAGE YOU WANT TO LINK TO"><img src="THE URL OF YOUR IMAGE" /></a></p>

Pretty weird huh?

Use the following code:

<p style="border-top : 4px dotted red; border-left : 4pt dashed rgb(90,90,90); border-bottom: 6px ridge red; border-right: 5px groove #733366;">Pretty weird huh?</p>

Since embedded code is restricted as far as Squidoo coding is concerned, you must use alternative ways to do things. A question was asked; "How can I center something within a border?". Great question!

Here's the way that you can use to center text. You would use html for a "space".

The following would equal two spaces:
&nbsp; &nbsp;

Repeat the code above over and over, until you have positioned the text or image into the center. As you will see by the example code below, I used this html 26 times before the link centered.

**Notice that I used "text-decoration:none"? This was to prevent the link underline from displaying all the way from the left side.**

A Whole Bunch of Words

General words about general stuff.
More words about weird stuff.

                                                    Squidoo Tools

Use the following code:

<p style="border:6px outset blue;"><b>A Whole Bunch of Words</b>
General words about general stuff.
More words about weird stuff.

<a style="text-decoration:none" href="http://www.squidoo.com/great-squidoo-resources" title="Squidoo Tools">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b>Squidoo Tools</b></a>

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.