Published on April 12, 2007 By DrDonald In Tutorials

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">
and ends with
         </STYLE>
including those style tags. Right-mouse-click or Ctrl-C copy this and right-mouse-click or Ctrl-V paste this into your favorite text editor, word processor or blog site editor. You'll be including this, or your modified version of this, at the beginning any blog you want styled. You'll notice that between the style tags I've defined a number of style class selectors with arbitrary names like ".indentfirst". Style classes always start with a period. Between the braces that follow is the definition of the style class. This will always follow a property: value format. If you'd like information on making your own classes, follow the links at the end of this article, or easier still, just stick with the properties listed and add new class names to reflect different property values.

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!

The Output

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.

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.Then we switch to 14-pixel Comic font. We default back to the original.Then we reduce the size to 10 pixels.Again, we revert to the original 12-pixel Times New Roman.

The Corresponding Code


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

Links

w3schools Link
culturedcode Link
htmldog Link
w3.org Link

Comments (Page 1)
2 Pages1 2 
on Apr 12, 2007
Nah, I wouldn't want my blog to be too interesting.
on Apr 12, 2007
Nah, I wouldn't want my blog to be too interesting.

gosh your "quick"  
on Apr 12, 2007
Aye, tis true!

on Apr 12, 2007
Aye, tis true!

yer fonts is dingin' me wings  
on Apr 12, 2007
My head hurts.
on Apr 12, 2007
Ugh. Computerese.
on Apr 12, 2007

Aye, tis true!

yer fonts is dingin' me wings  


I knew you'd get it
on Apr 12, 2007
I knew you'd get it

...heehee
My head hurts.

Sorry Tex. The perfect antidote is Buddah's poetry. In fact, this is just a subtle way of promoting his stuff.  
Ugh. Computerese.

Heh, I just wanted to try a bit of technical writing. I don't think I'll try any more any time soon. It was painful for me too!


(Do you know how hard it was to print out that code section without it executing on me? I had to replace every less-than sign with ampersand-followed-by-LT-semicolon and every greater-than sign with ampersand-followed-by-GT-semicolon.)
on Apr 12, 2007
Try the Code Block bbcode thingie next time (to the right of insert picture).
on Apr 12, 2007
Try the Code Block bbcode thingie next time (to the right of insert picture).

Thanks. I blog from JoeUser not from the StarDock. There's no such widget here, but I checked the StarDock forum and it looks like the widget inserts {code="html"}{/code} with square brackets instead of braces. That should save me a lot of trouble. Thanks again! 

Code: html
  1. Unfortunately SPAN and P tags still get interpretted rather than shown.. oh well
 
on Apr 12, 2007
They should insert a badge or something on posts that cross-over from JU, then we'd know where things are coming from.
on Apr 12, 2007

Oh,

it's

all

fun

on Apr 13, 2007

I


like


it


on Apr 13, 2007
THis is neat Dr. D!
on Apr 13, 2007
Thanks Jafo and Bichur. I see you using

   

THis is neat Dr. D!

Thanks FS! Be careful. People might think you're a geek too!  
2 Pages1 2