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