While CSS Font covers most of the traditional ways to format your text, CSS Text allows you to control the spacing, decoration, and alignment of your text.

Text Decoration
Have you ever wondered how a website removed the underline that usually accompanies a link's text? This is done by removing text decoration from the link. To learn how to create these types of links, please check out our CSS Links tutorial. Besides the utility with links, text-decoration allows you to add horizontal lines above, below, or through your text.

CSS Code:
h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }
Display:
This header has a line through the middle
This header has an overline
This header has an underline
This is a link without an underline - See our CSS Link tutorial for more information
Text Indent
CSS text-indent is a great way to indent your paragraphs without having to use preformatted HTML tags or inserting spaces manually. You may define your indendation with exact values or percentages. We recommend using exact values.

CSS Code:
p { text-indent: 20px; }
h5 { text-indent: 30%; }
Display:
This is a paragraph that uses a text indentation with the value of 20px. This is the recommended usage of text indentation.

This is a header that uses a text indentation of 30%. Tizag does not recommend indenting your text with percentages.
Text Align
The default text-align setting is to the left, like most literature and other forms of media that you read. However, sometimes you may require a different alignment and it can be specified using the text-align attribute.

CSS Code:
p { text-align: right; }
h5{ text-align: justify; }
Display:
This paragraph is aligned to the right side of the HTML element. If you ever find a use for using right justify, please let us know. Just kidding, we don't really want to know.

This header is justified. We recommend that you either align your text to the left, which is the default setting, or justify your text. But feel free to experiment with all the available alignment options that are at your disposal.
Text Transform
Text-transform is a quick way to modify the capitalization of your text.

CSS Code:
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
Display:
Hi, I am happy to see you.

Hi, I am happy to see you.
Hi, I am happy to see you.
Note: All sentences below origionally were, "Hi, I am happy to see you." With the use of the text-transform CSS attribute we were able to modify the capitalization.

CSS White Space
The white-space attribute allows you to prevent text from wrapping until you place a break
into your text.

CSS Code:
p { white-space: nowrap; }
Display:
This paragraph will not wrap until I tell it to with a break tag. As you can see, it makes the page look
quite ugly.
In the above paragraph the page break occurred after "...page look ", which caused the text to resume on the following line.

Note: We set a CSS overflow property, above, so that the example could be shown more readily.

CSS Word Spacing
With the CSS attribute word-spacing you are able to specify the exact value of the spacing between your words. Word-spacing should be defined with exact values.

CSS Code:
p { word-spacing: 10px; }
Display:
This paragraph has a word-spacing value of 10px.

CSS Letter Spacing
With the CSS attribute letter-spacing you are able to specify the exact value of the spacing between your letters. Letter-spacing should be defined with exact values.

CSS Code:
p { letter-spacing: 3px; }
Display:
This is a paragraph with letter-spacing of 3px.













http://www.tizag.com/cssT/text.php