TYPOGRAPHY

(As you can see, type effects can easily be VERY overdone!)

First, as stated above, we will assume that you can hand code text in bold and italic before we begin.

These methods highlighted below, and attributed to the lensmasters whose lens they were first discovered on, should not take much mastery beyond that basic nested HTML coding knowledge.

From the Simple HTML Tricks lens:

Orange text is awesome!
I love orange so much!

Here's the code:
<b style="color: #ff9900; font-weight: normal;">Orange text is awesome!</b>
<b style="color: #ff9900;">I love orange so much!</b>

This example comes from the Simple HTML Tricks lens.

How do I make a colored background behind a paragraph?

Highlight the entire paragraph with a lovely light blue background.

Highlight the entire paragraph with a nice pale orange background.

Here's the code:

<p style="background: #c9d9e5">Highlight the entire paragraph with a lovely light blue background.</p>

<p style="background: #ffe6c0">Highlight the entire paragraph with a nice pale orange background.</p>

This example comes from the Advanced HTML for Squidoo lens.

How do I make a colored background behind a few words?

Highlight only a few words in a sentence with a light colored background.

Here's the code:
Highlight only a <b style="background-color: #ffe6c0; font-weight: normal;">few words</b> in a sentence with a <b style="background-color: #c9d9e5; font-weight: normal;">light colored</b> background.

Also on the Advanced HTML for Squidoo lens is a variety of code for producing a drop cap at the beginning of a paragraph.

This is my favorite variation, with a few personal tweaks:

Nam et ligula eget erat luctus iaculis. Vivamus non mi at tellus molestie tempor. Proin tincidunt ullamcorper nisi. Etiam tempor mi quis erat. Suspendisse porta egestas metus. Integer aliquam convallis felis. Integer mattis, eros vitae aliquet blandit, ante diam vehicula lectus, dapibus semper lacus libero non ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum, urna at commodo bibendum, quam eros commodo felis, ac eleifend lectus tortor luctus nibh.

Here's the code:
<b style="font-size: 100px; float: left; background: #ffcc80; color: white; line-height: 70px; padding-top: 2px; font-family: Times; border-bottom: medium; border-left: medium; border-right: medium; border-top: medium; border-style: inset; margin-right: 4px; padding-bottom: 6px; padding-left: 4px; padding-right: 4px;">N</b>am et ligula eget ...

These color codes will create variations of orange and blue that will look great with the official Squidoo colors.

#276596  #c9d9e5
#13324b  #93b2cb

#ff9900  #ffe6c0
#7f4c00  #ffcc80

Some of my favorite typographic tools in page layout are the bullet and the em dash ... but how do I use them on Squidoo lenses?

What you need to find is the HTML numeric code for the appropriate symbol. Fortunately, several lensmasters have found these for you and compiled their research. Here are my most often used:

•
(bullet)
code: &#8226;

—
(em dash)
code: &#8212;

©
(copyright)
code: &#169;

¢
(cent sign)
code: &#162;

These and many more can be found at this lens by sonia-simone, and you can get math symbols here from N376.

Sometimes you want some text a little larger than the rest.

You could make it this big for impact.

Here's the code:
You could make it <b style="font-size: 24px; font-weight: normal;">this big</b> for impact.

Or you can make the whole paragraph larger, like this.

Here's the code:
<p style="font-size: 24px; line-height: 1em;">Or you can make the whole paragraph larger, like this.</p>

Play around with the pixel size until you get the results you want.

Change can be good.

Variety is the spice of life.

But, use heavy fonts sparingly!

Here's the code:
<p style="font-family: Times; font-size: 24px;">Change can be good.</p>
<p style="font-family: Verdana; font-size: 16px;">Variety is the spice of life.</p>
<p style="font-family: Impact; font-size: 30px;">But, use heavy fonts sparingly!</p>

Be sure to only use the most common fonts or your readers may get very undesirable results.

You may have discovered that the simple HTML code for a horizontal rule (<hr>) does not work within these modules.

To separate paragraphs within a module, you may want to try a customizable dividing line such as this one:

There are a lot of variables that you can change to get the look and feel you want.

Here's the code:
<p style="border-bottom: 2px dashed #276596;"></p>

More lines and their accompanying code to follow.

<p style="border-bottom: 3px dotted #ff9900;"></p>

<p style="border-bottom: 4px double #93b2cb;"></p>

<p style="border-bottom: 1px solid #ffcc80;"></p>

Another trick I LOVE is the call-out box.

The code for these boxes, or at least the code that I started with before making my own modifications, is at the Advanced HTML lens.

This is a very neat way to place emphasis on important information in your lens. You can change the type of border, the background color of the box, and many other options by learning just a little bit of code!

Here's the code:
<p style="padding: 8px; background-color: #ffe6c0; font-weight: normal; border: dotted 2px #ff9900;">YOUR TEXT HERE</p>

Some types of borders are: dotted, dashed, solid, double, groove, ridge, inset, outset ... this one is double.

Here's the code:
<p style="padding: 4px; background-color: #c9d9e5; color: #13324b; border: double 4px #13324b;">YOUR TEXT HERE</p>

Same again but with a dashed border set at 1px.

Here's the code:
<p style="padding: 4px; background-color: #c9d9e5; color: #13324b; border: dashed 1px #13324b;">YOUR TEXT HERE</p>

You want to quote someone within your Text/Write module, and then continue with your own comments. But how can you clearly differentiate and display the text you are quoting?

Once again I borrow from the Advanced HTML lens by N376:

I love the way you show the examples and then give the code used to make them. Now we can all look like experts! (So long as we don't royally screw things up.)

Pretty neat, huh? I made a few changes to margins and such to adapt it for my own style preferences. Carefully make your own changes to the font and margins, and test the results until you get what YOU want.

Here's the code:
<b style="float: left; font-weight: normal; font: 12px/18px normal Arial, sans-serif; margin-top: 8px; margin-bottom: 8px; margin-left: 35px; padding-left: 8px; border-left: 2px dotted gray;">YOUR TEXT HERE</b><br clear="both">

An example of another way to display a quote:

oh hi, join me fan club? Srsly. it Is teh awesum. I can has fanz? hey StArzZ 2 plz? k thx bai!

Here's the code:
<b style="float: left; font-weight: normal; font: 14px/16px Courier, Courier New; margin-top: 12px; margin-bottom: 12px; margin-left: 60px; padding-left: 12px; border-left: 6px double #ff9900;">YOUR TEXT HERE</b><br clear="both">

Ack! When using the above "quote" code on another lens, I had an unsightly problem ... the next paragraph didn't want to line up on the left like it should.

After a quick visit to CSS Tricks I found the answer in a tiny bit of additional code. Include this where you need a line break that clears the formatting set by the preceding paragraph:
<br clear="both">

Please RATE this lens:

(5 stars is the BEST!)