Skip to content

HTML – the fun continues

May 25, 2009

Font Styles

The style elements provide a straightforward way to control the font. These elements fall into two categories: physical styles and logical styles

For my purposes I use the down and dirty style of taking what an already-created page has to offer, and then adding my personality using my two main font changers, bold and italic.


I am not a webpage artist or master who uses the subtleties of a computer programming language to create a beautiful page.  For me as a business owner, the things that are important are clarity, simplicity, and a little emphasis.  The things I use are below, abridged from the original.  For the complete list, see the actual tutorial: The Pocket HTML Tutorial if you want to take the entire course.
Logical Styles

A logical style indicates that the enclosed text has some sort of special meaning. Those I use are limited to these:

  • 1) <em> ; Emphasizes text. Usually rendered as italic.

Please visit <em>MaidenShade’s Sale</em> today!

Looks like this: Please visit MaidenShade’s Sale today! 
  • 2) <strong> ; Strongly emphasizes text. Usually rendered as bold.

Please visit <strong>MaidenShade’s Sale</strong> today!

Looks like this: Please visit MaidenShade’s Sale today!

Physical Styles

Physical style elements specify a particular font change. For example, to make text bold, you can mark it off with the element: <b> text </b>. The list of available physical style elements I use are these:  

  • 1) <b> Makes text bold. Appropriate for product names, etc.
Today, is proud to announce <b>The Goddess Tissue Cozy </b>, the only hand-crafted, cottage style tissue cozy finished inside and out, on the market.
Becomes: Today, is proud to announce The Goddess Tissue Cozy, the only hand-crafted, cottage style tissue cozy finished inside and out, on the market.


  • 2) <i> Makes text italic. Appropriate for ship names, internal monologues and thoughts, …

<i>”I think that too much flair is distracting from the message.”</i>

Becomes, “I think that too much flair is distracting from the message.”

The physical styles are subtly different from the logical styles. The logical style element strong means “something strongly emphasized,” while the physical style element <b >just means, “something that is bold.”

To me, physical or logical, the result is the same, bold and italic.

Next will be Colors for text and background – why do you need this stuff?  Well, just in case you don’t have a wysiwyg editor handy.  Oh boy, can’t wait!
Until then, xJ


The Pocket HTML Tutorial” Copyright 2009 by Evan Goer

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to FurlAdd to Newsvine

6 Comments leave one →
  1. May 25, 2009 8:56 am

    Do you have other html tutorials on your blog? Two things I’d like to know more about are html and PhotoShop.

    Let’s see if I learned something.

  2. May 25, 2009 8:59 am

    Looks like I passed your lesson. LOL!

  3. Andrew permalink
    May 25, 2009 9:30 am

    Why are you showing old HTML? <b>…</b> and <i>…</i> aren’t used anymore due to css.

    HTML is only used for the structure of the website, not the style. If you’re styling the site/post/whatever with HTML tags, you’re doing it wrong.

    <strong> and <em> are the proper ways of doing the bold and italics.

  4. May 25, 2009 9:31 am

    Hey thank you for visiting today. Great Job!!! I have one other so far, the first which talked about the elements.

    PhotoShop – I can point you to some resources I used to put wings on my cats, create my faerie in a teardrop and so on. Are you familiar with the basic stuff?

  5. May 25, 2009 9:33 am

    Hi Andrew – TY So Much! You know I’ve been told both that it does, and that it doesn’t matter which you use. Also, I did get this from a tutorial if you look at my credits – Can you offer us help on the coding?

    TY for the info on PhotoShop too!

  6. Andrew permalink
    May 25, 2009 12:21 pm

    There’s a great online tv show about Photoshop called Pixel Perfect found on Revision3

    There is also Photoshop User Tv found at

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: