All You Can Do with Font style elements:TT, I, B, BIG, SMALL, STRIKE, S, and U

All You Can Do With: Font style elements: TT, I, B, BIG, SMALL, STRIKE, S, and U

W3 Org on Font style elements: the TT, I, B, BIG, SMALL, STRIKE, S, and U elements

Not showing in this AYCD page.

tabindex is available to control the tab order.(tabindex="5" {index order number}).
alt - not relavent
JavaScript
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup

Basic Basic Example:

bold, italic, bold italic, teletype text, and big and small text.~~Strike-through~~ and Underlined.

Basic Example:
bold,
italic, bold italic, <tt>teletype text</tt>, and
<big>big</big> and small text.<S>Strike-through</S> and Underlined.

tabindex This may not be usefull except with objects you can act upon, like form objects.

bold, italic, bold italic, teletype text, and big and small text.~~Strike-through~~ and Underlined.

Basic Example:
bold,
italic, bold italic, <tt tabindex="3">teletype text</tt>, and
<big tabindex="4">big</big> and small text.<S tabindex="6">Strike-through</S> and Underlined.

accesskey This may not be usefull except with objects you can act upon, like form objects.

bold, italic, bold the TT, I, B, BIG, SMALL, STRIKE, S, and U elements, teletype text, and big and small text.~~Strike-through~~ and Underlined.

Basic Example:
bold,
italic, bold italic, <tt>teletype text</tt>, and
<big>big</big> and small text.<S>Strike-through</S> and Underlined.

This is the CSS for the TT, I, B, BIG, SMALL, STRIKE, S, and U elements.

Background

Image Image Example:
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Image Example:
<TT style="background: url('images/box_aqua_bg.gif');">TT</TT> 
B 
Italic 
<BIG style="background: url('images/box_aqua_bg.gif');">BIG</BIG> 
SMALL 
<STRIKE style="background: url('images/box_aqua_bg.gif');">STRIKE</STRIKE> 
<S style="background: url('images/box_aqua_bg.gif');">S</S> 
U

Color

background-color background-color Example:
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="background-color: lightyellow;">TT</TT> 
B 
Italic 
<BIG style="background-color: lightyellow;">BIG</BIG> 
SMALL 
<STRIKE style="background-color: lightyellow;">STRIKE</STRIKE> 
<S style="background-color: lightyellow;">S</S> 
U

Transparent background-color: Transparent Example:
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="background-color: Transparent;">TT</TT> 
B 
Italic 
<BIG style="background-color: Transparent;">BIG</BIG> 
SMALL 
<STRIKE style="background-color: Transparent;">STRIKE</STRIKE> 
<S style="background-color: Transparent;">S</S> 
U

Did this by adding a background image to the enclosing div tag.

Image Repeat-X

Image Repeat-X Image Repeat-X Example:
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-x;">TT</TT> 
B 
Italic 
<BIG style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-x;">BIG</BIG> 
SMALL 
<STRIKE style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-x;">STRIKE</STRIKE> 
<S style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-x;">S</S> 
U

Image Repeat-Y Image Repeat-Y Example:
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-y;">TT</TT> 
B 
Italic 
<BIG style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-y;">BIG</BIG> 
SMALL 
<STRIKE style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-y;">STRIKE</STRIKE> 
<S style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-y;">S</S> 
U

Image no-repeat Image no-repeat Example:
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="background: url('images/box_aqua_bg.gif'); background-repeat: no-repeat;">TT</TT> 
B 
Italic 
<BIG style="background: url('images/box_aqua_bg.gif'); background-repeat: no-repeat;">BIG</BIG> 
SMALL 
<STRIKE style="background: url('images/box_aqua_bg.gif'); background-repeat: no-repeat;">STRIKE</STRIKE> 
<S style="background: url('images/box_aqua_bg.gif'); background-repeat: no-repeat;">S</S> 
U

Image Repeat Image Repeat Example:
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat;">TT</TT> 
B 
Italic 
<BIG style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat;">BIG</BIG> 
SMALL 
<STRIKE style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat;">STRIKE</STRIKE> 
<S style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat;">S</S> 
U

These work too:

background-attachment: scroll
background-attachment: fixed

Color Color
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="color: red;">TT</TT> 
B 
Italic 
<BIG style="color: red;">BIG</BIG> 
SMALL 
<STRIKE style="color: red;">STRIKE</STRIKE> 
<S style="color: red;">S</S> 
U

Cursor Cursor
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="Cursor: crosshair;">TT</TT> 
B 
Italic 
<BIG style="Cursor: crosshair;">BIG</BIG> 
SMALL 
<STRIKE style="Cursor: crosshair;">STRIKE</STRIKE> 
<S style="Cursor: crosshair;">S</S> 
U

Here are the options:

auto
crosshair
default
hand
pointer
move
n
ne
e
se
sw
w
nw-resize
text
wait
help
url(url)

Direction Direction
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="direction: rtl;">TT</TT> 
B 
Italic 
<BIG style="direction: rtl;">BIG</BIG> 
SMALL 
<STRIKE style="direction: rtl;">STRIKE</STRIKE> 
<S style="direction: rtl;">S</S> 
U

Here are the options:

Right To Left=rtl
Left To Right=ltr

Display Display
CSS Display is being evealuated for implementation on this page.

Float Float- right
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="float: right;">TT</TT> 
B 
Italic 
<BIG style="float: right;">BIG</BIG> 
SMALL 
<STRIKE style="float: right;">STRIKE</STRIKE> 
<S style="float: right;">S</S> 
U

Float- left
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="float: left;">TT</TT> 
B 
Italic 
<BIG style="float: left;">BIG</BIG> 
SMALL 
<STRIKE style="float: left;">STRIKE</STRIKE> 
<S style="float: left;">S</S> 
U

Float- none
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="float: none;">TT</TT> 
B 
Italic 
<BIG style="float: none;">BIG</BIG> 
SMALL 
<STRIKE style="float: none;">STRIKE</STRIKE> 
<S style="float: none;">S</S> 
U

Font Just can't see doing all these tags for this object.

Margin Margin
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="margin-top: 20px;">TT</TT> 
B 
Italic 
<BIG style="margin-top: 20px;">BIG</BIG> 
SMALL 
<STRIKE style="margin-top: 20px;">STRIKE</STRIKE> 
<S style="margin-top: 20px;">S</S> 
U

Here are the options:

margin-top: auto/Xpx;
margin-right auto/Xpx;
margin-bottom auto/Xpx;
margin-left auto/Xpx;

Padding padding
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="padding: 12px;">TT</TT> 
B 
Italic 
<BIG style="padding: 12px;">BIG</BIG> 
SMALL 
<STRIKE style="padding: 12px;">STRIKE</STRIKE> 
<S style="padding: 12px;">S</S> 
U

Here are the options:

padding-top
padding-right
padding-bottom
padding-left

Position position
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="position: relative; top:-50; left:5">TT</TT> 
B 
Italic 
<BIG style="position: relative; top:-50; left:5">BIG</BIG> 
SMALL 
<STRIKE style="position: relative; top:-50; left:5">STRIKE</STRIKE> 
<S style="position: relative; top:-50; left:5">S</S> 
U

Here are the options:

position:absolute
position:relative
position:fixed
top
left
z-index

Text Align text align
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-align: right">TT</TT> 
B 
Italic 
<BIG style="text-align: right">BIG</BIG> 
SMALL 
<STRIKE style="text-align: right">STRIKE</STRIKE> 
<S style="text-align: right">S</S> 
U

center
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-align: center">TT</TT> 
B 
Italic 
<BIG style="text-align: center">BIG</BIG> 
SMALL 
<STRIKE style="text-align: center">STRIKE</STRIKE> 
<S style="text-align: center">S</S> 
U

justify:
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-align: justify">TT</TT> 
B 
Italic 
<BIG style="text-align: justify">BIG</BIG> 
SMALL 
<STRIKE style="text-align: justify">STRIKE</STRIKE> 
<S style="text-align: justify">S</S> 
U

Here are the options:

text-align: left
text-align: center
text-align: right
text-align: justify

Text Decoration text decoration
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-decoration: line-through">TT</TT> 
B 
Italic 
<BIG style="text-decoration: line-through">BIG</BIG> 
SMALL 
<STRIKE style="text-decoration: line-through">STRIKE</STRIKE> 
<S style="text-decoration: line-through">S</S> 
U

blink
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-decoration: blink">TT</TT> 
B 
Italic 
<BIG style="text-decoration: blink">BIG</BIG> 
SMALL 
<STRIKE style="text-decoration: blink">STRIKE</STRIKE> 
<S style="text-decoration: blink">S</S> 
U

Here are the options:

text-decoration: none
text-decoration: overline
text-decoration: line-through
text-decoration: underline
text-decoration: blink

Text Indent text indent
text-indent: 100px;
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-indent: 100px;">TT</TT> 
B 
Italic 
<BIG style="text-indent: 100px;">BIG</BIG> 
SMALL 
<STRIKE style="text-indent: 100px;">STRIKE</STRIKE> 
<S style="text-indent: 100px;">S</S> 
U

Here are the options:

text-indent: #px

Text Justify text justify
text-justify: newspaper;
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-justify: newspaper;">TT</TT> 
B 
Italic 
<BIG style="text-justify: newspaper;">BIG</BIG> 
SMALL 
<STRIKE style="text-justify: newspaper;">STRIKE</STRIKE> 
<S style="text-justify: newspaper;">S</S> 
U

Here are the options:

text-justify: auto;
text-justify: distribute;
text-justify: distribute-all-lines;
text-justify: inter-cluster;
text-justify: inter-ideograph;
text-justify: inter-word;
text-justify: kashda;
text-justify: newspaper;

Text Shadow text shadow
text-shadow: blue;
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-shadow: blue;">TT</TT> 
B 
Italic 
<BIG style="text-shadow: blue;">BIG</BIG> 
SMALL 
<STRIKE style="text-shadow: blue;">STRIKE</STRIKE> 
<S style="text-shadow: blue;">S</S> 
U

Here are the options:

text-shadow:

Text Transform text transform
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-transform: uppercase;">TT</TT> 
B 
Italic 
<BIG style="text-transform: uppercase;">BIG</BIG> 
SMALL 
<STRIKE style="text-transform: uppercase;">STRIKE</STRIKE> 
<S style="text-transform: uppercase;">S</S> 
U

Here are the options:

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;

Text Underline Position text underline position
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="text-underline-position: above;">TT</TT> 
B 
Italic 
<BIG style="text-underline-position: above;">BIG</BIG> 
SMALL 
<STRIKE style="text-underline-position: above;">STRIKE</STRIKE> 
<S style="text-underline-position: above;">S</S> 
U

Here are the options:

text-underline-position: above;
text-underline-position: below;

Vertical Align vertical align
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="vertical-align: top;">TT</TT> 
B 
Italic 
<BIG style="vertical-align: top;">BIG</BIG> 
SMALL 
<STRIKE style="vertical-align: top;">STRIKE</STRIKE> 
<S style="vertical-align: top;">S</S> 
U

TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="vertical-align: middle;">TT</TT> 
B 
Italic 
<BIG style="vertical-align: middle;">BIG</BIG> 
SMALL 
<STRIKE style="vertical-align: middle;">STRIKE</STRIKE> 
<S style="vertical-align: middle;">S</S> 
U

TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="vertical-align: bottom;">TT</TT> 
B 
Italic 
<BIG style="vertical-align: bottom;">BIG</BIG> 
SMALL 
<STRIKE style="vertical-align: bottom;">STRIKE</STRIKE> 
<S style="vertical-align: bottom;">S</S> 
U

Here are the options:

vertical-align: top;
vertical-align: middle;
vertical-align: baseline;
vertical-align: bottom;
vertical-align: sub;
vertical-align: super;
vertical-align: text-bottom;
vertical-align: text-top;

Visibility visibility
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="visibility: hidden;">TT</TT> 
B 
Italic 
<BIG style="visibility: hidden;">BIG</BIG> 
SMALL 
<STRIKE style="visibility: hidden;">STRIKE</STRIKE> 
<S style="visibility: hidden;">S</S> 
U

Here are the options:

visibility: hidden;
visibility: visible;
visibility: collapse;

White Space white space
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="white-space: nowrap;">TT</TT> 
B 
Italic 
<BIG style="white-space: nowrap;">BIG</BIG> 
SMALL 
<STRIKE style="white-space: nowrap;">STRIKE</STRIKE> 
<S style="white-space: nowrap;">S</S> 
U

Here are the options:

white-space: normal;
white-space: nowrap;
white-space: pre;

Word Spacing word spacing
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="word-spacing: -5px;">TT</TT> 
B 
Italic 
<BIG style="word-spacing: -5px;">BIG</BIG> 
SMALL 
<STRIKE style="word-spacing: -5px;">STRIKE</STRIKE> 
<S style="word-spacing: -5px;">S</S> 
U

Here are the options:

word-spacing: normal;
word-spacing: #px;
word-spacing: -#px;

Word Wrap word wrap
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="word-wrap: break-word;">TT</TT> 
B 
Italic 
<BIG style="word-wrap: break-word;">BIG</BIG> 
SMALL 
<STRIKE style="word-wrap: break-word;">STRIKE</STRIKE> 
<S style="word-wrap: break-word;">S</S> 
U

TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="word-wrap: normal;">TT</TT> 
B 
Italic 
<BIG style="word-wrap: normal;">BIG</BIG> 
SMALL 
<STRIKE style="word-wrap: normal;">STRIKE</STRIKE> 
<S style="word-wrap: normal;">S</S> 
U

Here are the options:

word-wrap: break-word;
word-wrap: normal;

Zoom zoom
TT
B
Italic
BIG
SMALL
~~STRIKE~~
S
U

Basic Example:
<TT style="zoom: 50%;">TT</TT> 
B 
Italic 
<BIG style="zoom: 50%;">BIG</BIG> 
SMALL 
<STRIKE style="zoom: 50%;">STRIKE</STRIKE> 
<S style="zoom: 50%;">S</S> 
U

Here are the options:

zoom: 50%;