|
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 Text Decoration utility 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; } Text Indent 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. CSS Code: p { text-indent: 20px; } h5 { text-indent: 30%; } Text Align By default, text on your website is aligned to the left, like most literature and other forms of media you read. You can specify different text-alignment using the text-align attribute. CSS Code: p { text-align: right; } h5{ text-align: justify; } This paragraph is aligned to the right side of the HTML element and header is justified. Text Transform Text-transform is used to modify the capitalization of your text. CSS Code: p { text-transform: capitalize; } h5{ text-transform: uppercase; } h6{ text-transform: lowercase; } CSS White Space The white-space attribute allows you to prevent text from wrapping until you place a break into your text. CSS Code: p { white-space: nowrap; } This paragraph will not wrap until I tell it to with a break tag. 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; } 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; } |