NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

<!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">
<!--
/* letter and word spacing */
.letterspaced {letter-spacing: 10pt;}
.wordspaced  {word-spacing: 20px;}
/* vertical alignment examples */
.sub {vertical-align: sub;}
.super {vertical-align: super;}
/* text alignment properties */
.right {text-align: right;}
.left {text-align: left;}
.justify {text-align: justify;}
.center {text-align: center;}
/* indentation and line-height examples */
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;}
/* text transformation properties */
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}
.capitalize {text-transform: capitalize;}
/* text-decoration properties */
.underline {text-decoration: underline;}
.blink {text-decoration: blink;}
.line-through {text-decoration: line-through;}
.overline {text-decoration: overline;}
/* white space control */
.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>

CLOSE WINDOW | VIEW RENDERED PAGE