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 links 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.

Example:

h4{ text-decoration: line-through; } 

h5{ text-decoration: overline; } 

h6{ text-decoration: underline; } 

a { text-decoration: none; }

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.

Example:

p { text-indent: 20px; }

h5 { text-indent: 30%; }

Output

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%. Hiscript 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.

Example:

p { text-align: right; } 

h5{ text-align: justify; }

Output

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 donot 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.

Example:

p { text-transform: capitalize; } 

h5{ text-transform: uppercase; } 

h6{ text-transform: lowercase; }

Output

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.

Example:

p2 { white-space: nowrap; }

Output
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.

Example:

p3 { word-spacing: 10px; }

Output
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.

Example:

p5 { letter-spacing: 3px; }

Output
This is a paragraph with letter-spacing of 3px.

CSS Text

This is a header that uses a text indentation of 30%. Hiscript does not recommend indenting your text with percentages.

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.

Hi, I am happy to see you.

Hi, I am happy to see you.

Web Tutorials