CSS Text Properties Example
<!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>HTML/XHTML: » 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>
<div class="content">
<p><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>
<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">This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
</p>
<p class="center">Text can of course also be centered.</p>
<p class="indent">This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
</p>
<p class="negindent"><span id="bigchar">T</span>his is another
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
</p>
<p class="carson">This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
</p>
<h2>Text Transformation</h2>
<p><span class="uppercase"></span>
<span class="lowercase">To AllLowercase.</span>
<span class="capitalize">This text is all capitalized. It doesn't do what you think, does it?</span></p>
<span class="blink">blink under Netscape.</span>
<span class="underline">underlined.</span>
<span class="line-through">struck.</span>
<span class="overline">overline.</span>
<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 is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
This is a test. </p>
</div>
</body>
</html>
Related examples in the same category