CSS Text Formatting Properties

This property is used to change the style of text.

CSS supports the following text formatting properties:

1. letter-spacing

This property sets the space between characters.

The value for letter spacing:
  • letter-spacing: 5px – Sets the spacing between letter of 5px.
  • letter-spacing: -5px – Sets the spacing between letter of -5px.

Example: Demonstration of letter spacing

<html>
     <body>
          <p style="letter-spacing: 5px;">letter spacing 5px.</p>
          <p style="letter-spacing: -2px;">letter spacing -5px.</p>
     </body>
</html>


Output:
letter spacing

2. Word-spacing

This property sets the space between words.

The values for word spacing can be:
  • word-spacing: 4px – Sets the spacing between word of 4px.
  • word-spacing: -4px – Sets the spacing between word of -4px.

Example: Demonstration of word-spacing

<html>
     <body>
          <p style="word-spacing: 13px;">word spacing 13px.</p>
          <p style="word-spacing: -8px;">word spacing -8px.</p>
     </body>
</html>


Output:
word spacing

3. Line-height

This property is used to specify the space between two lines.

The values for the property can be:
  • Normal
  • Numbers like 0.5, 1.3, 2 etc.
  • Length like 22 px, etc.
  • Percentage like 150%, etc.

Example: Demonstration of Line-height

<html>
     <head>
          <style>
               p.small
               {
                    line-height: 0.5;
               }
               p.big
               {
                    line-height: 1.3;
               }
          </style>
     </head>
     <body>
          <p> This paragraph has a standard line-height</p>
          <p class="big"> This paragraph has bigger line height 1.3.</p>
          <p class="small"> This paragraph has smaller line height 0.5</p>
     </body>
</html>


Output:
line height

4. Text-decoration

This property is used to set or remove decorations from text.

The possible values for this property are:
  • none (default value)
  • underline
  • overline
  • line-through
  • blink

Example: Demonstration of text-decoration

<html>
     <body>
          <p style="text-decoration:underline;">
               This text is underline.
          </p>
          <p style="text-decoration:line-through;">
               This text is strike through.
          </p>
          <p style="text-decoration:overline;">
               This text will appear overline.
          </p>
     </body>
</html>


Output:
text decoration

5. Text-transform

This property is used to specify the text into uppercase, lowercase and capitalize the first letter of the word.

The possible values for text-transform property are:
  • none
  • capitalize
  • uppercase
  • lowercase

Example: Demonstration of text-transform

<html>
     <body>
          <p style="text-transform:capitalize;">
               This text will be capitalized.
          </p>
          <p style="text-transform:uppercase;">
               This text will be in uppercase.
          </p>
          <p style="text-transform:lowercase;">
               This text will be in lowercase.
          </p>
     </body>
</html>


Output:
This Text Will Be Capitalized.
THIS TEXT WILL BE IN UPPERCASE.
this text will be in lowercase.

6. Text-align

The possible values for text align property are:
  • left
  • right
  • center
  • justify

7. Text-indent

This property is used to specify the indentation of the first line of the text of a block level element.

The possible value for text-indent are:
  • length like 1.7px, 50px, 1 cm etc.
  • percentage like 10% , 25 %, etc.

Example: Illustration of text-indent

<html>
     <body>
          <p style="text-indent: 50px;">
               This is the first line indented by 50px. <br> This line will remain at its actual position.
          </p>
     </body>
</html>


Output:
text indent

8. White-space

The white-space property is used to control the flow and formatting of the text.

The possible values for white-space are:
  • normal
  • pre
▲