Prev Next

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>

Leave a Comment