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 85 people | Log in to rate

Ranked #142 in Squidoo Tips, #13,303 overall

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:
featured lens Squidoo CSS - my favorite code to spice up a lens

I've gathered my favorite Squidoo-code for later reference. I'm tired of trying to find that specific lens I used a css effect on and then having to go to edit-mode, copy paste, and then go back to the lens I was working on. This lens will help me be...

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

Anything left that's not clear about combining CSS?

Lensmaster

spirituality wrote...

in reply to kiwisoutback Yes, that might work: enclosing the text in bold code and floating it left or right might work - or perhaps you can try text-aligning the text that's 'bold'. (thought of that last night- haven't tried it yet)

ReplyPosted April 02, 2009

Lensmaster

kiwisoutback wrote...

Darn! I'll see if I can float the text to the right instead then. Thanks!

ReplyPosted April 01, 2009

Lensmaster

spirituality wrote...

in reply to kiwisoutback Great question. Unfortunately I have experimented with this, and it seems the only way to do it is by centering everything in the paragraph, including whatever text you have there. See this explanation.

ReplyPosted April 01, 2009

Lensmaster

kiwisoutback wrote...

I had a question for you. By the way, I use this lens and your other CSS lens all the time! How do you center an image inside of an orange block, like the one below this guestbook? Thanks for all of your tutorials, they're an enormous help!

ReplyPosted April 01, 2009

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>

Changing things around WITHIN a paragraph... 

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>

More squidoo help lenses 

featured lens Katinka's Squidoo Answer Deck

I felt it was time to put all my lenses helping lensmasters be more effective together in a lensography. I've put this off for a long time, but when a reader on my blog said that squidoo should make a 'Katinka Answer Deck' - I knew it was time. After...

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>

Aligning text & images 

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>

SO, did you learn to code your own CSS? 

Lensmaster

jaye3000 wrote...

Gret lens, love the help!

ReplyPosted June 12, 2009

Lensmaster

paperfacets wrote...

Thank you for this Squidoo friendly info. I love to experiment. Good way to update a lens when new written material is exhausted.

ReplyPosted June 03, 2009

Lensmaster

aj2008 wrote...

Another must read lens for anyone looking to do something just that little bit different to their lenses.

ReplyPosted May 18, 2009

Lensmaster

2Eklectik wrote...

Thanks very much!

ReplyPosted May 13, 2009

Lensmaster

Shedbuilder wrote...

Very helpful thanks

ReplyPosted May 11, 2009

 
Next Page
1 of 9 pages

More by me... 

featured lens Katinka Hesselink - my other lenses

I'm a lensmaster, webdesigner an oldest child, an eternal student, a former teacher and single. Most of you know me here on Squidoo as lensmaster 'spirituality' - but I've also got a life outside my interests in spirituality (though perhaps that's n...

featured lens Nerdy lenses - digital info, tips and fun

Meet the nerd in me... I've made some lenses in which I share some of the things I've learned while designing websites and earning a living. These are them: some SEO tips, CSS tricks, Myspace tips and more.

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.