Scribd
Upload
43 views

3CSS Propertiestext Controlling and Text Formatting

This document discusses 8 CSS text formatting properties: letter-spacing, word-spacing, line-height, text-decoration, text-transform, text-align, text-indent, and white-space. Each property is defined and examples are provided to demonstrate how they can be used to style text through CSS.

Uploaded by

Sathwik Reddy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views

3CSS Propertiestext Controlling and Text Formatting

This document discusses 8 CSS text formatting properties: letter-spacing, word-spacing, line-height, text-decoration, text-transform, text-align, text-indent, and white-space. Each property is defined and examples are provided to demonstrate how they can be used to style text through CSS.

Uploaded by

Sathwik Reddy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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:

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:

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:

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:

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:

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

You might also like