Pimping Your Blogging Style

Have you ever wanted to change a typeface or point size for a heading, a paragraph or word in your blog? Have you ever wanted to indent the first line of a paragraph, indent a whole paragraph or change line justification? If so, this technique may be for you. It assumes that your blog site, like JoeUser.com, has an HTML mode that permits CSS Styles. If you are already familiar with HTML and CSS, this is old stuff and you need to read no further. There is nothing original here and I realize there are probably many simpler ways of achieving the same results. Still, this may be helpful to some, so lets start!

First, you may want to have a look at some examples of formatting below under the heading "The Output". The code that produced this output is under the heading "The Corresponding Code". Not bad, eh?

To start, highlight the code that begins with

         <STYLE TYPE="text/css">

         </STYLE>

To actually use the style classes, you specify the class value within HTML tags. For example, to format a whole paragraph, we'd do something like:

         <P class="treb alignright"> paragraph text here </P>

If instead we wanted to change the typeface inline, we'd do this:

         <SPAN class="comic"> inline text here </SPAN>

You'll notice that several class values can be specified with spaces between and all surrounded by quotation marks. Now, have a careful look at the samples I've provided and you'll see that they're self-documenting. Finally, try experimenting on your own if you like. Be careful to allow sufficient line-height to accomodate font-height. So go ahead and have some fun, but not too much fun!

Indented Georgia with line-height 18 pixels and font-height 14 pixels. Woven silk pyjamas exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag.

Block-indented Verdana with line-height 11 pixels and font-height 10 pixels. Woven silk pyjamas exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag. Woven silk pyjamas exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag. Woven silk pyjamas exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag.

Right-aligned Trebuchet with line-height 14 pixels and font-height 12 pixels. Woven silk pyjamas exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag.

Center-aligned Comic with line-height 18 pixels and font-height 12 pixels.
Woven silk pyjamas exchanged for blue quartz.
Crazy Fredericka bought many very exquisite opal jewels.
Sixty zippers were quickly picked from the woven jute bag.

<STYLE TYPE="text/css">
<!--
.indentfirst {text-indent: 16px;}
.indentall {padding-left: 50px; padding-right: 50px;}
.aligncenter {text-align: center}
.alignright {text-align: right}
.treb {font-family: Trebuchet MS, sans-serif}
.georgia {font-family: Georgia, serif}
.verdana {font-family: Verdana, sans-serif}
.comic {font-family: Comic Sans MS, sans-serif}
.times {font-family: Times New Roman, serif}
.font10 {font-size: 10px}
.font11 {font-size: 11px}
.font12 {font-size: 12px}
.font14 {font-size: 14px}
.line11 {line-height: 10px}
.line12 {line-height: 12px}
.line14 {line-height: 14px}
.line18 {line-height: 18px}
-->
</STYLE>

<P class="indentfirst georgia line18 font14">Indented Georgia with line-height 18 pixels and font-height 14 pixels. Woven silk pyjamas 
exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute 
bag.</P>
<P class="verdana indentall line11 font10">Block-indented Verdana with line-height 11 pixels and font-height 10 pixels. Woven silk pyjamas 
exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag. 
Woven silk pyjamas exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from 
the woven jute bag. Woven silk pyjamas exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were 
quickly picked from the woven jute bag.</P>

<P class="treb alignright line14 font12">Right-aligned Trebuchet with line-height 14 pixels and font-height 12 pixels. Woven silk pyjamas 
exchanged for blue quartz. Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag.</P>

<P class="comic aligncenter line18 font12">Center-aligned Comic with line-height 18 pixels and font-height 12 pixels.<BR> Woven silk 
pyjamas exchanged for blue quartz.<BR> Crazy Fredericka bought many very exquisite opal jewels.<BR> Sixty zippers were quickly 
picked from the woven jute bag.</P>

<SPAN class="times line18 font12">These lines illustrate how nested SPAN tags can be used to perform in-line format changes to the type-
face and the size of the font. We start with 12-pixel Times New Roman.<SPAN class="font14 comic">Then we switch to 14-pixel Comic 
font.</SPAN> We default back to the original.<SPAN class="font10">Then we reduce the size to 10 pixels.</SPAN>Again, we revert to
 the original 12-pixel Times New Roman.</SPAN>