Style Tags

or scroll down the page.

Return to Main Page of Ted’s HTML Tutorial

Reading text which all appears the same size and color (especially black) is similar to viewing a black-and-white TV—not very stimulating.  Wouldn’t this tutorial be boring if all of it were black print on a white background?  Ho-hum.  “Style” tags give variety, emphasis, and color to ordinary text.

Probably the most important method for transforming the text in an HTML source code document is by the use of “font” tags:

A <FONT> tag may contain within it any or all of the 3 parameters used to transform text:


In some cases, one may not wish for the headings on a web page to be limited to six (6) standard font sizes.  There is a way to make every heading level, throughout the entire page, be any size and color one wishes it to be, using “style” tags:

Normally, heading levels 2 (<H2> & </H2>) and 3 (<H3> & </H3>) are sizes 18-point and 14-point, respectively.  As typically written here, these headings: <CENTER>
<H2>Heading #2</H2>
<H3>Heading #3</H3>
</CENTER>
would appear this way:

Heading #2

Heading #3

However, one might wish for the respective size of each of these heading levels to be somewhat larger, as well as the same respective color to be uniform, throughout a page.  In such a case, the following size and color specifications:
<STYLE>H2 {FONT-SIZE: 21pt; COLOR: #000080}; H3 {FONT-SIZE: 17pt; COLOR: #008000}</STYLE>
<CENTER>
<H2>Heading #2</H2>
<H3>Heading #3</H3>
</CENTER>
now would cause the headings to appear like this:


Any of the three font parameters (face, size, and color) can be changed temporarily or permanently using “basefont” tags:

A <BASEFONT> tag may contain within it any or all of the 3 parameters used to transform the text:

Here is a sample paragraph, with various font tags:

<CENTER><IMG SRC="graphics/NMflag1.gif" WIDTH="79" HEIGHT="44"><FONT COLOR="#700000" SIZE="+2"><H1>New Mexico State Flag</H1></CENTER>
The State Flag of New Mexico has on it a modern interpretation of an ancient symbol of a sun design, as seen on a late 19th century water jar from the Zia Pueblo.&nbsp; This pueblo is thought to have been one of the Seven Golden Cities of Cibola, which explorer Vasquez de Coronado sought.&nbsp; The <FONT COLOR="RED">red</FONT> sun symbol was then called a &#147;Zia&#148; and is shown on a field of <FONT COLOR="#FFB000">gold</FONT>.&nbsp; The <FONT COLOR="#FF0000">red</FONT> and <FONT COLOR="#FFB000">gold</FONT> colors, which the Spanish Conquistadores brought to the New World, were the colors of Queen Isabela of Castile.&nbsp; Here is the official salute to the New Mexican Flag:<BLOCKQUOTE><FONT FACE="ARIAL" COLOR="#FF8000" SIZE="4"><B>I salute the flag of the State of New Mexico and the Zia symbol of perfect friendship among united cultures.</B></FONT></BLOCKQUOTE>
which appears this way on a browser:

New Mexico State Flag

The State Flag of New Mexico has on it a modern interpretation of an ancient symbol of a sun design, as seen on a late 19th century water jar from the Zia Pueblo.  This pueblo is thought to have been one of the Seven Golden Cities of Cibola, which explorer Vasquez de Coronado sought.  The red sun symbol was then called a “Zia” and is shown on a field of gold.  The red and gold colors, which the Spanish Conquistadores brought to the New World, were the colors of Queen Isabela of Castile.  Here is the official salute to the New Mexican Flag:
I salute the flag of the State of New Mexico and the Zia symbol of perfect friendship among united cultures.
See the section on Graphic Images to learn more about how images, such as the flag above, can be incorporated into documents.


Another common way to add emphasis to text, or to change its size, is by using “italic” tags, “emphasis” tags, “bold” tags, “strong emphasis” tags, “underline” tags, “strike-through” tags, “big” tags, and “small” tags:

The following email, from one co-worker to another, uses four of these tags:

Hey Kevin,<BR><BR>

That sure was a <B>bold</B> move on your part to tell off the boss this afternoon! Man, it's something <I>everybody</I> has wanted to do for a long time! I guess now you'll be <S>getting that raise you've been wanting</S> looking for another job starting tomorrow, huh buddy? <B><I><U>Just</U> <U>kidding</U>!</I> :-)</B> Anyway, on behalf of the crew, <U>thanks</U>, and we're all behind ya!!<BR><BR>

John
and would appear this way: Hey Kevin,

That sure was a bold move on your part to tell off the boss this afternoon! Man, it's something everybody has wanted to do for a long time! I guess now you'll be getting that raise you've been wanting looking for another job starting tomorrow, huh buddy? Just kidding! :-) Anyway, on behalf of the crew, thanks, and we're all behind ya!!

John
Note:  Some browsers do not recognize bold, italic, underline, or strike-through tags when they are clumped together.  In such a case, a browser usually will choose one set of these tags and ignore the others.  Also, when sending email to a different server, HTML tags often will not be processed correctly.


If desired, print on a browser can be made to look like “typewriter text”:

The “ingredients” sections of this recipe:
<FONT SIZE="4"><CENTER><I><B><U>QUICK</U> <U>CORNBREAD</U></B></I><BR><BR>

Preparation Time: 20 minutes<BR>
Cooking Time: 25-45 minutes (depending on altitude)<BR><BR>

<TT><U>DRY</U> <U>Ingredients</U><BR>
1 c. white or yellow cornmeal<BR>
1 c. flour<BR>
1 tsp. baking <U>powder</U><BR>
½ tsp. salt<BR><BR>

<U>WET</U> <U>Ingredients</U><BR>
1½ Tblsp. maple syrup<BR>
¼ c. olive oil<BR>
1 c. milk<BR>
1 egg, beaten<BR>
1 large jalapeño pepper, minced, <I>or</I><BR>
1 4-oz. can green chiles, chopped (optional)</TT></CENTER><BR><BR>

1. Mix well all the dry ingredients in one bowl and all the wet ingredients in another bowl. Add the dry ingredients to the wet ingredients, and stir until <U>well-combined</U>.<BR><BR>

2. Pour the mixture into a well-greased 9"×2" round, or 8"×8"×2" square, glass baking pan. Bake in a preheated 350° oven for 25-45 minutes (depending on altitude), or until lightly browned and a toothpick inserted into the middle comes out dry. Set aside and cool. This recipe serves 8 to 10 people.</FONT>
would appear on a browser as though the words had been typed on a typewriter:
QUICK CORNBREAD

Preparation Time: 20 minutes
Cooking Time: 25-45 minutes (depending on altitude)

DRY ingredients
1 c. white or yellow cornmeal
1 c. flour
1 tsp. baking powder
½ tsp. salt

WET ingredients
1½ Tblsp. maple syrup
¼ c. olive oil
1 c. milk
1 egg, beaten
Optional: 1 large jalapeño pepper, minced, or
1 4-oz. can green chiles, chopped


1. Mix well all the dry ingredients in one bowl and all the wet ingredients in another bowl. Add the dry ingredients to the wet ingredients, and stir until well-combined.

2. Pour the mixture into a well-greased 9"×2" round, or 8"×8"×2" square, glass baking pan. Bake in a preheated 350° oven for 25-45 minutes (depending on altitude), or until lightly browned and a toothpick inserted into the middle comes out dry. Set aside and cool. This recipe serves 8 to 10 people. Note:  If you would like to know to type special characters (such as the ½, ñ, ×, and ° symbols above), go to my Special ALT Characters page.


An interesting effect can be obtained by making print move on a page, using “marquee” tags:

A <MARQUEE> tag may contain within it other parameters as part of the command: Here are some examples of marquees (remember, some browsers will not display marquees):
  1. <FONT COLOR="#FF0000" SIZE="5"><MARQUEE>Hi! I'm Ted, and I think HTML is really cool!</MARQUEE></FONT> will yield:
Hi! I'm Ted, and I think HTML is really cool!

  1. <MARQUEE DIRECTION="LEFT">A marquee is an excellent way to draw attention to text.</MARQUEE>

    <MARQUEE DIRECTION="RIGHT">Marquee text can be made to move right as well as left.</MARQUEE>
    will yield:
A marquee is an excellent way to draw attention to text.
Marquee text can be made to move right as well as left.


    (See other DIRECTION examples in #6 & #13 below.)

  1. <FONT FACE="ARIAL" SIZE="4" COLOR="#FFFF00"><MARQUEE BGCOLOR="#FF00FF">Change the background color of a marquee to make it more striking.</MARQUEE></FONT> will yield:
Change the background color of a marquee to make it more striking.

    (See other BGCOLOR examples in #6, #7, & #13 below.)

  1. <MARQUEE BEHAVIOR="SCROLL">Most commonly, marquee text disappears off of the screen and reappears where it began.</MARQUEE>

    <MARQUEE BEHAVIOR="SLIDE">However, the text in a marquee can be made to "stick" and remain stationary once it reaches the other side.</MARQUEE>

    <MARQUEE BEHAVIOR="ALTERNATE">Also, marquee text can be made to "bounce" back and forth from one side to the other.</MARQUEE>
    will yield:
Most commonly, marquee text disappears off of the screen and reappears where it began.
However, the text in a marquee can be made to "stick" and remain stationary once it reaches the other side.
Also, marquee text can be made to "bounce" back and forth from one side to the other.


    (See other BEHAVIOR examples in #8 & #13 below.)

  1. <MARQUEE LOOP="3">This text will scroll 3 times and then disappear without returning.</MARQUEE>
    <MARQUEE LOOP="3" BEHAVIOR="SLIDE">This text will slide across 3 times and then stop.</MARQUEE>
    <MARQUEE LOOP="3" BEHAVIOR="ALTERNATE">This text will alternate 3 times and then stop.</MARQUEE>
    will yield:
This text will scroll 3 times and then disappear without returning.
This text will slide across 3 times and then stop.
This text will alternate 3 times and then stop.


    (See another LOOP example in #13 below.)

  1. <MARQUEE WIDTH="50%">This text begins halfway across the screen.</MARQUEE>

    <TABLE WIDTH="100%">
    <TR><TD WIDTH="50%"></TD>
    <TD WIDTH="50%"><MARQUEE DIRECTION="RIGHT">Using a table, text can scroll across the right half of a screen.</MARQUEE></TD>
    </TR>
    </TABLE> 
    (See Tables.)

    <MARQUEE WIDTH="185">Multiple marquees in a row</MARQUEE><MARQUEE WIDTH="185">can have this very</MARQUEE><MARQUEE WIDTH="185">strange effect on text...</MARQUEE><MARQUEE WIDTH="185">or even the following effect:</MARQUEE>

    <FONT COLOR="RED"><MARQUEE WIDTH="25%" DIRECTION="RIGHT" BGCOLOR="WHITE">*************************</MARQUEE>
    </FONT>
    <FONT COLOR="BLUE"><MARQUEE WIDTH="25%" DIRECTION="RIGHT" BGCOLOR="WHITE">*************************</MARQUEE>
    </FONT>
    <FONT COLOR="RED"><MARQUEE WIDTH="25%" DIRECTION="RIGHT" BGCOLOR="WHITE">*************************</MARQUEE>
    </FONT>
    <FONT COLOR="BLUE"><MARQUEE WIDTH="24%" DIRECTION="RIGHT" BGCOLOR="WHITE">**************************</MARQUEE>
    </FONT>
    Note:  Some browsers will not accept a series of marquees whose widths add up to greater than 99%.  Therefore, the width of the last marquee above has been reduced by 1%.  The number of stars (*) inside this marquee has been increased by 1 to compensate.
    <CENTER><MARQUEE WIDTH="33%">This one-third-browser-width marquee is centered.</MARQUEE></CENTER>
    will yield:
This text begins half-way across the screen.
Using a table, text can scroll across the right half of a screen.

Multiple marquees in a rowcan have this verystrange effect on text...or even the following effect: *****************************************************************************************************
This one-third-browser-width marquee is centered.

    (See other WIDTH examples in #8, #9, #10, #11, #12, & #13 below.)

  1. <FONT COLOR="#006060" SIZE="4"><MARQUEE HEIGHT="60" BGCOLOR="#FFC0FF">Since text can travel only across the top of a marquee, the "height" parameter is not often used due to waste of space.</MARQUEE></FONT> will yield:
Since text can travel only across the top of a marquee, the "height" parameter is not often used due to waste of space.

    (See another HEIGHT example in #13 below.)

  1. On a browser,&nbsp;<FONT SIZE="5"><MARQUEE ALIGN="TOP" BEHAVIOR="ALTERNATE" WIDTH="150">moving text</MARQUEE></FONT>&nbsp;catches the eye.<BR>
    On a browser,&nbsp;<FONT SIZE="5"><MARQUEE BEHAVIOR="ALTERNATE" ALIGN="MIDDLE" WIDTH="150">moving text</MARQUEE></FONT>&nbsp;catches the eye.<BR>
    On a browser,&nbsp;<FONT SIZE="5"><MARQUEE BEHAVIOR="ALTERNATE" ALIGN="BOTTOM" WIDTH="150">moving text</MARQUEE></FONT>&nbsp;catches the eye.
    will yield:
On a browser, moving text catches the eye.
On a browser, moving text catches the eye.
On a browser, moving text catches the eye.
Note:  If the 3 sets of “moving text” words above are not moving together, it is because they appeared at different times in your browser window.     (See other ALIGN examples in #9 & #13 below.)

  1. <CENTER>Equal <MARQUEE HSPACE="25" ALIGN="MIDDLE" WIDTH="60">horizontal space</MARQUEE> can be inserted on either side of a marquee.</CENTER> will yield:
Equal horizontal space can be inserted on either side of a marquee.

    (See another HSPACE example in #13 below.)

  1. <CENTER>Equal vertical space can be inserted above and below<BR>
    <MARQUEE VSPACE="20" WIDTH="15%">a marquee</MARQUEE><BR>
    to provide "padding" between it and any lines of text before and after it.</CENTER>
    will yield:
Equal vertical space can be inserted above and below
a marquee
to provide "padding" between it and any lines of text before and after it.

    (See other VSPACE examples in #11, #12, & #13 below.)

  1. <CENTER><MARQUEE SCROLLAMOUNT="12" WIDTH="40%" VSPACE="10">Text jumping 12 pixels per appearance</MARQUEE><BR>
    will cover distance at twice the rate as<BR>
    <MARQUEE SCROLLAMOUNT="6" WIDTH="40%" VSPACE="10">text jumping 6 pixels (the default) per appearance</MARQUEE><BR>
    which, in turn, will cover distance at twice the rate as<BR>
    <MARQUEE SCROLLAMOUNT="3" WIDTH="40%" VSPACE="10">text jumping 3 pixels per appearance.</MARQUEE></CENTER>
    will yield:
Moving text jumping 12 pixels per reappearance
will cover distance at twice the rate as
moving text jumping 6 pixels (the default) per reappearance
which, in turn, will cover distance at twice the rate as
moving text jumping 3 pixels per reappearance.

    (See another SCROLLAMOUNT example in #13 below.)

  1. <CENTER><MARQUEE SCROLLDELAY="90" WIDTH="40%" VSPACE="10">Moving text reappearing every 90 milliseconds (the default)</MARQUEE><BR>
    will cover distance at twice the rate as<BR>
    <MARQUEE SCROLLDELAY="180" WIDTH="40%" VSPACE="10">moving text reappearing every 180 milliseconds</MARQUEE><BR>
    which, in turn, will cover distance at twice the rate as<BR>
    <MARQUEE SCROLLDELAY="360" WIDTH="40%" VSPACE="10">moving text reappearing every 360 milliseconds.</MARQUEE></CENTER>
    will yield:
Moving text reappearing every 90 milliseconds (the default)
will cover distance at twice the rate as
moving text reappearing every 180 milliseconds
which, in turn, will cover distance at twice the rate as
moving text reappearing every 360 milliseconds.


    (See another SCROLLDELAY example in #13 below.)

  1. <CENTER><FONT COLOR="#00A0A0" SIZE="4"><I><B><MARQUEE BGCOLOR="#FFC000" BEHAVIOR="ALTERNATE" WIDTH="12%" SCROLLAMOUNT="20">SPECIAL!</MARQUEE></B></I></FONT>
    <FONT FACE="LYDIAN,COMIC SANS MS,ARIAL" COLOR="#D0D090" SIZE="6"><MARQUEE BGCOLOR="#FF0000" WIDTH="68%" HEIGHT="60" ALIGN="BOTTOM" HSPACE="4%" VSPACE="25">ô¿ô&nbsp; SALE! Glasses & Contact Lenses for All Occasions!&nbsp; ô¿ô</MARQUEE></FONT>
    <FONT COLOR="#00A0A0" SIZE="4"><I><B><MARQUEE BGCOLOR="#FFC000" BEHAVIOR="ALTERNATE" WIDTH="12%" SCROLLAMOUNT="20">SPECIAL!</MARQUEE></B></I></FONT>

    <TABLE BGCOLOR="#FFFFA0" CELLSPACING="15" CELLPADDING="3">
    <TH BGCOLOR="#D09000"><FONT FACE="ARIAL" COLOR="#FF8000" SIZE="5"><MARQUEE BEHAVIOR="SLIDE" LOOP="3" SCROLLDELAY="200"> Designer Frames! </MARQUEE></FONT></TH>
    <TH>&nbsp;</TH>
    <TH BGCOLOR="#D09000"><FONT FACE="ARIAL" COLOR="#FF8000" SIZE="5"><MARQUEE BEHAVIOR="SLIDE" LOOP="3" SCROLLDELAY="200"> Colored Contacts! </MARQUEE></FONT></TH>
    <TR ALIGN="CENTER"> <TD BGCOLOR="#0080FF"><FONT COLOR="#0080FF" SIZE="4"><I><B><MARQUEE DIRECTION="RIGHT" BGCOLOR="#D0D0FF" WIDTH="135" SCROLLDELAY="90">&nbsp;Giorgio Armani&nbsp;</MARQUEE></B></I></FONT>
    </TD>
    <TD>&nbsp;</TD>
    <TD BGCOLOR="#0080FF"><FONT COLOR="#0080FF" SIZE="4"><I><B><MARQUEE BGCOLOR="#D0D0FF" WIDTH="135" SCROLLDELAY="100">&nbsp; &nbsp;Electric Blue&nbsp; &nbsp;</MARQUEE></B></I></FONT>
    </TD>
    </TR>
    <TR ALIGN="CENTER"> <TD BGCOLOR="#00FF00"><FONT COLOR="#00FF00" SIZE="4"><I><B><MARQUEE DIRECTION="RIGHT" BGCOLOR="#C5FFC5" WIDTH="135" SCROLLDELAY="100">&nbsp; &nbsp; &nbsp; Givenchy&nbsp; &nbsp; &nbsp; </MARQUEE></B></I></FONT>
    </TD>
    <TD>&nbsp;</TD>
    <TD BGCOLOR="#00FF00"><FONT COLOR="#00FF00" SIZE="4"><I><B><MARQUEE BGCOLOR="#C5FFC5" WIDTH="135" SCROLLDELAY="99"> &nbsp;Emerald Green&nbsp;</MARQUEE></B></I></FONT></TD>
    </TR>
    <TR ALIGN="CENTER"> <TD BGCOLOR="#806000"><FONT COLOR="#804000" SIZE="4"><I><B><MARQUEE DIRECTION="RIGHT" BGCOLOR="#FFD0A0" WIDTH="135" SCROLLDELAY="101">&nbsp; Pierre Cardin&nbsp; </MARQUEE></B></I></FONT></TD>
    <TD>&nbsp;</TD>
    <TD BGCOLOR="#806000"><FONT COLOR="#804000" SIZE="4"><I><B><MARQUEE BGCOLOR="#FFD0A0" WIDTH="135" SCROLLDELAY="100">Charcoal Brown</MARQUEE></B></I></FONT></TD>
    </TR>
    <TR ALIGN="CENTER"> <TD BGCOLOR="#800080"><FONT COLOR="#800080" SIZE="4"><I><B><MARQUEE DIRECTION="RIGHT" BGCOLOR="#FFC0FF" WIDTH="135" SCROLLDELAY="99">&nbsp; &nbsp; &nbsp;Silhouette&nbsp; &nbsp; &nbsp;</MARQUEE></B></I></FONT></TD>
    <TD>&nbsp;</TD>
    <TD BGCOLOR="#800080"><FONT COLOR="#800080" SIZE="4"><I><B><MARQUEE BGCOLOR="#FFC0FF" WIDTH="135"> &nbsp; &nbsp;Royal Violet &nbsp; &nbsp;</MARQUEE></B></I></FONT></TD>
    </TR>
    </TABLE> 
    (See Tables.)

    <FONT FACE="LUCIDA HANDWRITING" COLOR="#C07000" SIZE="6"><B><I><U>Limited</U> <U>Supply</U>!  <U>Order</U> <U>Now</U>!</I></B></CENTER>
    will yield:
SPECIAL!ô¿ô  SALE! Glasses & Contact Lenses for All Occasions!  ô¿ôSPECIAL!
  Designer Frames!     Colored Contacts!
 Giorgio Armani       Electric Blue   
      Givenchy         Emerald Green 
  Pierre Cardin    Charcoal Brown
     Silhouette           Royal Violet  
Limited SupplyOrder Now!
Note:  On some browsers, the text strings in the lowest 8 marquees above will not be syncronized, even though they all have been calculated to move together.  Also, they may have appeared at different times in your browser window, causing a discrepancy.  Reloading the document may resynchronize the marquees.

Proceed to List Tags

Return to Main Page of Ted’s HTML Tutorial

Copyright © 1998– by Ted M. Montgomery.  All rights reserved.