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.
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.
h4{ text-decoration: line-through; } h5{ text-decoration: overline; } h6{ text-decoration: underline; } a { text-decoration: none; }
CSS text-indent is a great way to indent your paragraphs without having to use preformatted HTML tags, (<pre>), or inserting spaces manually ( ). You may define your indentation with exact values or percentages. We recommend using exact values.
p { text-indent: 20px; } h5 { text-indent: 30%; }
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.
p { text-align: right; } h5{ text-align: justify; }
Text-transform is a quick way to modify the capitalization of your text.
p { text-transform: capitalize; } h5{ text-transform: uppercase; } h6{ text-transform: lowercase; }
The white-space attribute allows you to prevent text from wrapping until you place a break <br /> into your text.
p { white-space: nowrap; }
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.
p { word-spacing: 10px; }
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.
p { letter-spacing: 3px; }