Style Tags

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:

text: changes the face (type), size, and/or color of ordinary text.

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

FACE="TYPE": sets or changes the face (type) of font script. The default font type for most browsers is “Times New Roman.” Most browsers recognize a very limited range of font faces. It is permissible to include more than one font type in the FACE parameter, in which case the browser will change the font face to the first type it recognizes. For instance, if is written, the font face will be changed to “Arial” type. If the browser does not recognize this type, the font face will be changed to “Comic Sans MS” type. If the browser does not recognize this type either, the font face will remain as “Times New Roman,” the default. A few font types are Arial, Brush Script, Century Gothic, Comic Sans MS, Courier, Gill Sans, Impact, Letter Gothic, Lucida Handwriting, Lydian, Mistral, News Gothic, Rockwell, Tahoma, and Verdana. Note: If any of the latter font types does not appear different from the standard text (Times New Roman), then your browser does not recognize that font type. A font face which contains many special characters is the "SYMBOL" type. See Special Characters for a listing of all these useful symbols.
SIZE="1"|"2"|"3"|"4"|"5"|"6"|"7": sets the size of the text. The size also can be set using a negative or a positive number from “–2” to “+4,” which is added to the default value of “3.” (For example, "–2" corresponds to "1" and "+4" corresponds to "7".) "1" (or "-2") causes the print to be this size (8 point).
"2" (or "-1") causes the print to be this size (10 point).
"3" (or "+0") (the default) causes the print to be this size (12 point).
"4" (or "+1") causes the print to be this size (14 point).
"5" (or "+2") causes the print to be this size (18 point).
"6" (or "+3") causes the print to be this size (24 point).
"7" (or "+4") causes the print to be this size (36 point).
Note: No matter what the font size is, headings with the same level number are always the same size, except as described under <STYLE> & </STYLE> below. Also, the font size of text in tables is always “3” unless changed with font size tags within the individual cells of the table.
COLOR="COLOR"|"#COLOR CODE": sets the color of the text. The color "black" or "#000000" is the default color. For more on color coding, go to Color Coding.

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:

<STYLE>H_ {FONT-SIZE: ___pt; COLOR: ___}</STYLE>: specifies the exact font size and color of a particular heading. Note: The heading level may be 1, 2, 3, 4, 5, or 6. The font size, in points, may be any positive whole number. The color may be expressed either as a hexidecimal code (see Categorized Color Charts) or as a color name (see Color Names Charts).

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:

<BASEFONT>text</BASEFONT>: changes the default font face (type), size, and/or color in a document. Note: On some browsers, unlike most end tags, the </BASEFONT> tag does not terminate the effects of the most recent <BASEFONT> tag. Rather, it resets the base font to the default value of “3” (which is the same as writing <BASEFONT SIZE="3">). On other browsers, however, the </BASEFONT> tag terminates the effects of the most recent <BASEFONT> tag. Therefore, care must be taken when using this end tag.

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

FACE="TYPE": changes the base font face (type) in a document from “Times New Roman” to another type. This parameter is not often used in a <BASEFONT> tag, since it will do the same thing in a tag.
SIZE="1"|"2"|"3"|"4"|"5"|"6"|"7": changes the base font size in a document from “3” to any other value from “1” to “7.” Relative font sizes (SIZE="–X" or SIZE="+Y") subsequently are added to this new default value. (The resultant font size cannot be less than 1 nor greater than 7.) Placing basefont tags around headings or tables does not affect the size of the text in them.
COLOR="COLOR"|"#COLOR CODE": changes the base font color in a document from “black” to another color. This parameter is not often used in a <BASEFONT> tag, since it will do the same thing in a tag. For more on color coding, go to Color Coding.

Here is a sample paragraph, with various font tags:

<CENTER><IMG SRC="graphics/NMflag1.gif" WIDTH="79" HEIGHT="44"><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.  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:<BLOCKQUOTE>I salute the flag of the State of New Mexico and the Zia symbol of perfect friendship among united cultures.</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:

text: causes text to be italicized.

text

text: emphasizes text by causing it to be italicized (like & above).

text

text: causes text to be bold.

text

text: strongly emphasizes text by causing it to be bold (like & above).

text

text: causes text to be underlined.

text

<S>text</S>: causes text to be stricken through with a horizontal line.

~~text~~

<BIG>text</BIG>: causes the size of text to be increased by one font size. This may be used rather than employing a tag with the SIZE parameter. <BIG> & </BIG> tags may be nested within one another, with each set of tags increasing the font size one degree (up to size "7").

text

text: causes the size of text to be decreased by one font size. This may be used rather than employing a tag with the SIZE parameter. & tags may be nested within one another, with each set of tags decreasing the font size one degree (down to size "1"). text Note: Some browsers do not recognize <BIG> & </BIG> or & tags.

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

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 <S>getting that raise you've been wanting</S> looking for another job starting tomorrow, huh buddy? Just kidding! :-) Anyway, on behalf of the crew, thanks, and we're all behind ya!! 

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

<TT>text</TT>: causes text to appear as though it had been typed on a standard typewriter, with each character taking up the same space width as every other character.

The “ingredients” sections of this recipe: <CENTER>QUICK CORNBREAD 

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

<TT>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 
1 large jalapeño pepper, minced, or 
1 4-oz. can green chiles, chopped (optional)</TT></CENTER> 

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

<MARQUEE>text</MARQUEE>: creates an area in which moving text will advance across all or a portion of a page, just as it does on some marquee signs. Note: Some browsers (such as Netscape) do not recognize marquees.

Note: Any HTML tags placed between <MARQUEE> & </MARQUEE> tags will be ignored by a browser. It depends on the browser being used.

Note: Marquees may not appear if placed inside of tables. It depends on the web browser being used.

Note: Marquee text moves only when it is viewable within a browser window.

A <MARQUEE> tag may contain within it other parameters as part of the command:

DIRECTION="LEFT"|"RIGHT": indicates the direction marquee text will move. "LEFT" (the default) causes marquee text to move from right to left on the screen.
"RIGHT" causes marquee text to move from left to right on the screen.

BGCOLOR="COLOR"|"#COLOR CODE": colors the background of a marquee. The default background is whatever the page’s background is. For more on color coding, go to Color Coding. Note: There are no <MARQUEE> parameters to change the font face (type), size, or color of marquee text. The only way to change the appearance of text within a marquee is by using & tags before/after a marquee.
BEHAVIOR="SCROLL"|"SLIDE"|"ALTERNATE": specifies how marquee text will behave as it moves horizontally on a browser screen. "SCROLL" (the default) causes moving text in a marquee to disappear before or as it reaches the opposite side of a screen.
"SLIDE" causes moving text in a marquee to “stick” and remain stationary before or as it reaches the opposite side of a screen. (For this to occur the first time the text slides across the page, LOOP="1" should be included in the command.)
"ALTERNATE" causes moving text in a marquee to “bounce” off of the opposite side of a screen (or at a designated point before reaching the other side of the screen) and then to move back in the other direction.
LOOP="N"|"INFINITE": specifies how many times “N” the text in a marquee will perform a BEHAVIOR function. “N” must be a positive whole number. The loop default is "INFINITE"; therefore, whether the LOOP parameter is not listed, or else the value is listed as "INFINITE", the activity of the marquee text will repeat indefinitely. Note: On some browsers, the LOOP parameter does not work properly if DIRECTION="RIGHT".

Note: LOOP="1" should be included in the command for the SLIDE parameter to occur exactly one time.
WIDTH="W": defines the horizontal width “W” of a marquee on a page. “W” can be expressed as a percentage “W%” (of the total width of the page) or simply as a whole number without the percent (indicating the number of pixels wide). By default, the width of a marquee is equal to the width of a page.
HEIGHT="H": defines the vertical height “H” of a marquee on a page. “H” can be expressed as a percentage “H%” (of the total height of the page) or simply as a whole number without the percent (indicating the number of pixels high). By default, the height of a marquee is equal to the height of the tallest text in the marquee, plus a small space of 1 to 5 pixels above and below the text. Note: Marquee text moves across the top of a marquee. Therefore, when the height specified for a marquee is greater than the default value, there will be unusable empty space from the bottom edge of the text to the bottom of the marquee.
ALIGN="TOP"|"MIDDLE"|"BOTTOM": specifies how stationary text (if any) on the same line as a marquee will be positioned with respect to the marquee. "TOP" aligns any stationary text on either side of a marquee with the top of the marquee.
"MIDDLE" aligns any stationary text on either side of a marquee with the middle of the marquee.
"BOTTOM" (the default) aligns any stationary text on either side of a marquee with the bottom of the marquee.
Note: If a marquee is centered using centering tags (<CENTER> & </CENTER>), no text can appear on the same line as the marquee, since a line space is inserted before and after text centered with centering tags.
HSPACE="H": inserts a horizontal space of width “H” on both sides of a marquee. If there is any stationary print on either side of the marquee, it will be separated from the marquee by this space.
VSPACE="V": inserts a vertical space of height “V” above and below a marquee. If there is any stationary print above or below the marquee, it will be separated from the marquee by this space.
SCROLLAMOUNT="A": specifies the number of pixels of space “A” the text in a marquee skips each time it is reprinted (appears) while moving along. Therefore, the larger the “A” value, the faster the text will move because the more space it will skip the next time it moves. The default is 6 pixels.
SCROLLDELAY="D": specifies the number of milliseconds “D” between each successive reprinting (appearance) of marquee text. (A millisecond is 1/1000 of a second.) That is, it controls the speed at which the text is reprinted as it moves along. Therefore, the larger the “D” value, the slower the text will move because the longer the text will be present in one place before it moves again. The default is 90 milliseconds, which is equal to 9 hundredths of a second (fractionally shorter than a tenth of a second). Most browsers will ignore SCROLLDELAY values less than 90, treating them as though they were 90. Note: Without SCROLLAMOUNT or SCROLLDELAY parameters being listed, regular marquee text progresses at a rate of 6 pixels every 9/100 of a second.

Here are some examples of marquees (remember, some browsers will not display marquees):

<MARQUEE>Hi! I'm Ted, and I think HTML is really cool!</MARQUEE> will yield:

Hi! I'm Ted, and I think HTML is really cool!

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

<MARQUEE BGCOLOR="#FF00FF">Change the background color of a marquee to make it more striking.</MARQUEE> will yield:

Change the background color of a marquee to make it more striking.

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

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

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

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

<MARQUEE WIDTH="25%" DIRECTION="RIGHT" BGCOLOR="WHITE">*************************</MARQUEE>

<MARQUEE WIDTH="25%" DIRECTION="RIGHT" BGCOLOR="WHITE">*************************</MARQUEE>

<MARQUEE WIDTH="25%" DIRECTION="RIGHT" BGCOLOR="WHITE">*************************</MARQUEE>

<MARQUEE WIDTH="24%" DIRECTION="RIGHT" BGCOLOR="WHITE">**************************</MARQUEE>
 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.)

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

On a browser, <MARQUEE ALIGN="TOP" BEHAVIOR="ALTERNATE" WIDTH="150">moving text</MARQUEE> catches the eye. 
On a browser, <MARQUEE BEHAVIOR="ALTERNATE" ALIGN="MIDDLE" WIDTH="150">moving text</MARQUEE> catches the eye. 
On a browser, <MARQUEE BEHAVIOR="ALTERNATE" ALIGN="BOTTOM" WIDTH="150">moving text</MARQUEE> 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.)

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

<CENTER>Equal vertical space can be inserted above and below 
<MARQUEE VSPACE="20" WIDTH="15%">a marquee</MARQUEE> 
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.)

<CENTER><MARQUEE SCROLLAMOUNT="12" WIDTH="40%" VSPACE="10">Text jumping 12 pixels per appearance</MARQUEE> 
will cover distance at twice the rate as 
<MARQUEE SCROLLAMOUNT="6" WIDTH="40%" VSPACE="10">text jumping 6 pixels (the default) per appearance</MARQUEE> 
which, in turn, will cover distance at twice the rate as 
<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.)

<CENTER><MARQUEE SCROLLDELAY="90" WIDTH="40%" VSPACE="10">Moving text reappearing every 90 milliseconds (the default)</MARQUEE> 
will cover distance at twice the rate as 
<MARQUEE SCROLLDELAY="180" WIDTH="40%" VSPACE="10">moving text reappearing every 180 milliseconds</MARQUEE> 
which, in turn, will cover distance at twice the rate as 
<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.)

<CENTER><MARQUEE BGCOLOR="#FFC000" BEHAVIOR="ALTERNATE" WIDTH="12%" SCROLLAMOUNT="20">SPECIAL!</MARQUEE>
<MARQUEE BGCOLOR="#FF0000" WIDTH="68%" HEIGHT="60" ALIGN="BOTTOM" HSPACE="4%" VSPACE="25">ô¿ô  SALE! Glasses & Contact Lenses for All Occasions!  ô¿ô</MARQUEE>
<MARQUEE BGCOLOR="#FFC000" BEHAVIOR="ALTERNATE" WIDTH="12%" SCROLLAMOUNT="20">SPECIAL!</MARQUEE>

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

Limited Supply! Order Now!</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 Supply! Order 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