CSS Text
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:
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 ( ). 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 the above sentences 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.
Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! Try it out! | 
