CSS Properties

Page 3

Text Properties

text-align

Text align is the new method of aligning your text left or right, or of centering it. I'm going to skip this example entirely, assuming that you know what it would look like. Valid values for text-align are 'left', 'right', 'center', and 'justify'.

text-decoration

With the demise of the u tag, text-decoration underlines, overlines, or provides strikethrough on your text. Valid values are 'none', 'underline', 'overline', and 'line-through'. One common use for text-decoration is to create links that have no underlining.

Example

CSS

a {text-decoration: none;}
.strike {text-decoration: line-through;}

Markup

<body>
<p>I'm going to buy a new computer and install <span class="strike">windows</span> <a href="http://www.linux.org/">linux</a></p>
</body>

Display

I'm going to buy a new computer and install windows linux.

text-indent

This property indents your text by the designated amount. The amount can be specified in a fixed length or a percentage, which will act as a percentage of the containing block width - in most cases that's the width of the page.

Example

CSS

p {text-indent:15px;}

Markup

<body>
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>
</body>

Display

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

text-transform

A useful CSS property which allows you to control the casing of your text, text-transform can make text upper case, lower case, or capitalize it, which means making the first letter of each word capital - great for headings.

Example

CSS

.bk_title {text-transform:uppercase;}

Markup

<body>
<h1><span class="bk_title">Nor Crystal Tears</span>, by Alan Dean Foster</h1>
</body>

Display

Nor Crystal Tears, by Alan Dean Foster

It may not immediately make sense that you would use this property rather than typing the text as it should appear, but it becomes especially useful when you're pulling the text from a database and wish to easily change the formatting.

letter-spacing/word-spacing

Applying spacing to fonts is different than using the font-stretch property. The characters themselves will not stretch - the distance between letters or words will lengthen.

Example

CSS

.spc_let {letter-spacing:2px;} .spc_word {word-spacing:2px;}

Markup

<body>
<p class="spc_let">Jessie Mach, an ex-motorcycle cop, is injured in the line of duty.</p>
<p class="spc_word">Now a Police Troubleshooter, he's been recruited for a top-secret government mission to ride Street Hawk, an all-terrain, attack motorcycle designed to fight urban crime.</p>
</body>

Display

Jessie Mach, an ex-motorcycle cop, is injured in the line of duty.
Now a Police Troubleshooter, he's been recruited for a top-secret government mission to ride Street Hawk, an all-terrain, attack motorcycle designed to fight urban crime.