Text Properties
There are a variety of text properties beyond the font that you can manipulate with CSS.
-
Word Spacing Word spacing is, unsurprisingly, the amount of space between words. The values can be indicated in inches (in), centimeters (cm), millimeters (mm), points (pt), picas (pc), the em (em) measurement, and pixels (px).
<html>
<head>
<style type="text/css">
h1.squish { word-spacing: -7px; }
h4 { word-spacing: 1.5cm; }
</style>
</head>
<body>
<h1>normal word spacing for header 1.</h1>
<h1 class="squish">-7px word spacing for header 1.</h1>
<h4>1.5cm word spacing for header 4.</h4>
</body>
</html> -
Letter Spacing Letter spacing affects the kerning of your text, or the space between individual letters. You can use the same units for letter spacing as for word spacing.
<html>
<head>
<style type="text/css">
h1 { letter-spacing: -3px; }
h4 { letter-spacing: 0.5cm; }
</style>
</head>
<body>
<p><b>It is important to remember that Netscape 4 does not support the "letter-spacing" property, but Mozilla versions 1.0+ do.</b></p>
<h1>-3px letter spacing for header 1.</h1>
<h4>0.5cm letter spacing for header 4.</h4>
</body>
</html> -
Vertical Align Vertical align is similar to the "valign" attribute used in HTML. It can be set with a variety of values such as baseline, sub, super, top, text-top, or middle, but not all are supported across every browser.
<table width="600" height="200" border="5">
<tr>
<td style="vertical-align: bottom">Some text goes here.</td>
<td style="vertical-align: top">Some text goes here.</td>
<td style="vertical-align: baseline"><h3>Some text goes here.</h3></td>
</tr>
</table> -
Text Align Text align is the horizontal equivalent of vertical align. You can assign an element to be left, right, center, or justified.
<html>
<head>
<style type="text/css">
h1 { text-align: center; }
h2 { text-align: left; }
h3 { text-align: right; }
p { text-align: justify; }
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<p>This is a long, justified paragraph. It's long, and it's justified-arific! Just look at those mad justification skillz that CSS has? Don't you just LOVE it now? Well, not yet, but that's because the paragraph hasn't wrapped enough yet to really display how awesomely, wonderfully, gorgeously justified it is.</p>
</body>
</html> -
Text Indent Text indent specifies the indentation for the first line in a block element such as in a paragraph.
<html>
<head>
<style type="text/css">
p { text-indent: 1cm; }
</style>
</head>
<body>
<p>
CSS is cool! CSS is cool! CSS is cool! CSS is cool! CSS is cool! CSS is cool! CSS is cool! CSS is cool! CSS is cool! CSS is cool!
</p>
</body>
</html>
