CSS Text (CSS tutorials part 9)

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, (<pre>), or inserting spaces manually (&nbsp;). You may define your indentation 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

By default, text on your website is aligned to the left, like most literature and other forms of media 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 originally 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 <br /> 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.