Text Formatting
This chapter we shall learn the different text formatting features of CSS
- Letter-spacing
- Word-Spacing
- Line-height
- Text-decoration
- Text-align
- Text-indent
- Text-transform
Letter-spacing
Letter-spacing property is used to set the space between the characters.
Sample code
H1 {letter-spacing:0.5cm;}
Word-spacing
Word-spacing property is used to set the space between the words.
Example
P {word-spacing:1cm;}
Line-height
The Line-height property is used to set the height of line. with this effect we can set spacing between the lines easily.
Example
P {line-height:200%;}
Text-decoration
The Text-decoration property is used to underline text, put line over text or line through text. It can be set using pre-defined values: Underline, Overline, Line-through, None (to remove line)
Example
H3 {text-decoration:underline;}
Text-align
The text-align property is used to align the text to the left indent, right indent, center to the left indent and right indent or align to both left and right indent. The alignment can be set by using one of the three pre-defined values: right, left, center or justify.
Example
H1{text-align:center;}
Text-indent
Text-indent property is used to indent the first line of text. It adds the specified space in the first line, before the text. It can be set by specifying the distance from the left margin.
Example
H1 {text-indent:1cm;}
Text-transform
The text-transform property is used to transform the text to uppercase, lowercase, capitalize. It can be set using predefined values: uppercase, lowercase, capitalize, none (default)
Example
H1 {text-transform:uppercase;}
Complete Example
<!DOCTYPE html> <html> <head> <style> H1 { text-transform:uppercase; /*uppercase, lowercase, capitalize, none*/ text-decoration:underline; /*Underline, Overline, Line-through, None*/ } p { letter-spacing:0.1cm; word-spacing:0.2cm; line-height:200%; text-indent:1cm; text-align:justify; /*right, left, center or justify.*/ } </style> </head> <body> <h1>Complete Example of TEXT effects</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>