<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>CSS Text Properties Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
.letterspaced {letter-spacing: 10pt;}
.wordspaced {word-spacing: 20px;}
.sub {vertical-align: sub;}
.super {vertical-align: super;}
.right {text-align: right;}
.left {text-align: left;}
.justify {text-align: justify;}
.center {text-align: center;}
p.indent {text-indent: 20px;
line-height: 200%;}
p.negindent {text-indent: -10px;
background-color: yellow;}
#bigchar {background-color: red;
color: white;
font-size: 28pt;
font-family: Impact;}
p.carson {font-size: 12pt;
font-family: Courier;
letter-spacing: 4pt;
line-height: 5pt;}
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}
.capitalize {text-transform: capitalize;}
.underline {text-decoration: underline;}
.blink {text-decoration: blink;}
.line-through {text-decoration: line-through;}
.overline {text-decoration: overline;}
.normal {white-space: normal;}
.pre {white-space: pre;}
.nowrap {white-space: nowrap;}
</style>
</head>
<body>
<h2>Letter Spacing and Vertical Alignment</h2>
<p>This is a paragraph of text.
<span class="letterspaced">Spacing letters is possible</span> and so <span class="wordspaced"> should word spacing.
Alas, it is not always supported!</span></p>
<p>Vertical alignment can be used to make
<span class="sub">Subscript</span> and
<span class="super">Superscript</span> text, but the
common use of the property is for aligning text next to images.</p>
<h2>Alignment</h2>
<p class="left">Align a paragraph to the left as normal.</p>
<p class="right">Align paragraphs to the right as we did in HTML.</p>
<p class="justify">You can even set the justification of text so
that it is aligned on both the left and the right side. You need
to be careful with this so that you don't get rivers of white space
running through your paragraphs.</p>
<p class="center">Text can of course also be centered.</p>
<h2>Indentation and Line Height</h2>
<p class="indent">With style sheets it is possible to set
indentation as well as line height. Now double spacing is a
reality. This is just dummy text to show the effects of the
indentation and spacing. This is just dummy text to show the
effects of the indentation and spacing.</p>
<p class="negindent"><span id="bigchar">T</span>his is another
paragraph that has negative indenting. Notice how you can pull
a character outside the paragraph for interesting effects. This
is just dummy text to show the effect of the indent. This is
just dummy text to show the effect of the indent.</p>
<h2>Surf Gun</h2>
<p class="carson">Don't get carried away with your newfound
powers. You may be tempted to show how cool you can be using
text on top of other text. While this may be good for certain
situations, it may also confuse the viewer.</p>
<h2>Text Transformation</h2>
<p>The next bit of text is transformed <span class="uppercase">to all
uppercase.</span><br />
The next bit of text is transformed<span class="lowercase">To All
Lowercase.</span><br />
<span class="capitalize">This text is all capitalized. It doesn't
do what you think, does it?</span></p>
<h2>Text Decoration</h2>
This text should <span class="blink">blink under Netscape.</span><br /><br />
This text should be <span class="underline">underlined.</span><br /><br />
This text should be <span class="line-through">struck.</span><br /><br />
This text should be <span class="overline">overline.</span><br /><br />
<h2>White Space Control</h2>
<p class="normal">This text controls space normally like
HTML; it condenses all spaces and
returns to a single character.</p>
<p class="pre">This paragraph
preserves any S P E C I A L spacing.</p>
<p class="nowrap">This paragraph does not wrap at all and
keeps going and going and going and going to the right
until I stop typing.</p>
</body>
</html>