Skip to navigation | Skip to content

Share your knowledge. Make a difference.

Advanced css for squidoo - spice up your lens MORE

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic (by 30 people)   Your rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic

Ranked #45 in Squidoo Tips, #2603 overall

Rated G. (Control what you see)

How to combine your css codes...

 

My lens about css for squidoo often gets the question: how do I combine the code?

This lens is an answer to that question.

CSS simpler 

If you just want to style your lens without worrying about understanding the code: here's the basics:

Time for a little Q&A about combining css-codes 

Anything left that's not clear about combining CSS?

So, you know what you're doing? 

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...

Combining pieces of 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).

border explained 

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>

Using color 

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>

Styling your text - fonts and font-weight and color combined 

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;">

Combining it all... 

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>

Bonustip: making it float... 

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>

More Squidoo Help Lenses - squidoo answer deck etc. 

Vote for your favorite squidoo answer deck lens (well, mine anyway)

squidoo css - my favorite code

I've gathered my favorite Squidoo-code for later r more...6 points

Lensrank explained (really)

Well, squidoo lensrank has, by common consensus, t more...5 points

Stumbleupon explained for lensmasters

Stumbleupon is great fun, and a tool for self-prom more...4 points

Cute modules to spice up your lens

Cute modules that will help your lens stand out. G more...4 points

Advanced css for squidoo - spice up your lens MORE

My lens about css for squidoo often gets the quest more...4 points

SEO for squidoo - getting found in google: search engine optimization

SEO - search engine optimization - has many differ more...3 points

Squidcasting - how to squidcast on squidoo

Squidcasting is THE way to let people within squid more...3 points

If you want to become popular on squidoo...

In some ways squidoo is like a popularity contest. more...3 points

Great Squidoo Groups Lensography

This lens was started because I just got tired of more...2 points

Vox - blogging made simple and (more) social

I recently found Vox through a web search. It turn more...2 points

The Introduction Module in Squidoo

Squidoo recently changed the Introduction module. more...2 points

Editing your squidoo lens - ideas

It's the last week of the month. To get your lense more...2 points

Google Blogsearch Module

I love to make a lens better by using google blog more...2 points

Low votes in squidoo should be banned!

I think people should lighten up about the star ra more...1 point

All Posters.Com the cutest affiliate program EVER

I do love this affiliate program. allPosters.com g more...1 point

Would you rather have a squidangel blessing or a quality link?

Would you rather have a squidangel blessing or a q more...1 point

Thank you lensmaster

I started the thank you lensmaster - squidoo revie more...0 points

How to do Keyword Research for squidoo

It is an under statement to say that keywords are more...0 points

created by spirituality

SO, did you learn to code your own CSS? 

Happiegrrrl wrote...

I'm still not "ready" to incorporate CSS. It just seems overwhelming still. Ah well. Someday!

ReplyPosted November 29, 2008

vbright105 wrote...

Very helpful lens. Thank you.

ReplyPosted November 23, 2008

ElizabethJeanAllen wrote...

I'm always looking for new ways to spice up my lenses.
Great lens
5 * and favored
Lizzy

ReplyPosted November 21, 2008

MiaBellezza wrote...

Great tips - thanks for sharing - 5* and favorited!

ReplyPosted November 19, 2008

NatalieJoBecker wrote...

Total newbie here, this was so helpfull. Thank you so much.

ReplyPosted November 17, 2008

 
1 of 3 pages

P.S. Still stuck? 

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.

More by me... 

X
spirituality

About spirituality

I'm a webmaster and student of religion and spirituality. See my website on religion and spirituality: www.katinkahesselink.net or my spiritual blog: All Considering.
Join my fanclub if you want to be kept updated on new (spiritual) lenses I make. I have lenses on The Ultimate Questions, Spiritual teachers and a few non-spiritual topics, including A few nerdy, squidoy topics.

spirituality's Pages

See all of spirituality's pages

X

Gold Star

This is a certified gold star lens, which means it's the best of its kind on Squidoo (or shows some serious potential for getting there!)

Read more about gold stars »

X

spirituality is a Giant Squid!

Giants are distinguished by their exceptional skill for making top-notch lenses, and lots of them. Whenever you land on a Giant Squid's lens, you know the person behind it is passionate about the topic and is hard at work making the lens worthy of your time and attention.

Learn more about what it takes to be a Giant »

X

Happy holidays!

The red bow is special. Whenever you see a red bow on a Squidoo page, it means the page is raising money for charity.

Buy something from the page, and we'll automatically make a donation to charity, thanks to you.