Text

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

TEXT DECORATION

Have you often wondered how a web site removed the underline that usually accompanies a hyperlink's text like we have done on our site here? This is done by removing text decoration from the link. To learn how to create these types of links, please check out our CSS Pseudo Element 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; } 
h4{ text-decoration: overline; } 
h4{ text-decoration: underline; } 
a { text-decoration: none; }

How It Looks

This header has a line through the middle

This header has an overline

This header has an underline

TEXT INDENT

The 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 indentation with exact values or percentages. We recommend using exact values.

CSS Code

p { text-indent: 20px; }
p { text-indent: 20%; } 

How It Looks

This paragraph has an indent of 20px. This is apparent when the text returns to the next line and against the margin.

This paragraph has an indent of 20%. This is apparent when the text returns to the next line and against the margin.

TEXT ALIGN

The default text-align setting of any document is to the left, like most literature and other forms of media that you would read. However, there comes a time you may require a different alignment and it can be specified using the text-align attribute.

CSS Code

p { text-align: right; } 
p { text-align: justify; } 

How It Looks

This paragraph has an alignment set to the right!

This paragraph has the alignment set to justify!

TEXT TRANSFORM

Text-transform is a quick way to modify the capitalization of your text.

CSS Code

p { text-transform: capitalize; } 
p { text-transform: uppercase; } 
p { text-transform: lowercase; } 

How It Looks

This paragraph has text-transform: capatalize on it.

This paragraph has text-transform: uppercase on it.

THIS PARAGRAPH HAS TEXT-TRANSFORM: LOWERCASE ON IT.

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; }

How It Looks

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 we set the page break <br /> to occur after "...page look ", which caused the text to resume on the following line. We also set the CSS Overflow property to scroll and the width to 500px so the example would be more easily demonstrated.

WORD SPACING

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; }

How It Looks

This Paragraph has a spacing of 10 pixel between each word.

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; }

How It Looks

This Paragraph has a letter-spacing of 3 pixel.