CSS Part 6

Set the text direction : 

Following is the example which demonstrates how to set the direction of a text. Possible values are ltr or rtl.

<p style="direction:rtl;"> 
This text will be renedered from right to left 
</p> 

This will produce following result:

This text will be renedered from right to left

Set the space between characters:

Following is the example which demonstrates how to set the space between characters. Possible values are normal or a number specifying space..

<p style="letter-spacing:5px;"> 
This text is having space between letters. 
</p>

This will produce following result:

This text is having space between letters.

Set the space between words:

Following is the example which demonstrates how to set the space between words. Possible values are normal or a number specifying space.. 

<p style="word-spacing:5px;"> 

This text is having space between words. 

</p>

This will produce following result: 

This text is having space between words. 

Set the text indent: 

Following is the example which demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.. 

<p style="text-indent:1cm;"> 

This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property. 

</p> 

This will produce following result:

This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property.

Set the text alignment:

Following is the example which demonstrates how to align a text. Possible values are left, right, center, justify.. 

<p style="text-align:right;"> 

This will be right aligned. </p> 

<p style="text-align:center;"> 

This will be center aligned. </p> 

<p style="text-align:left;"> 

This will be left aligned. </p> 

This will produce following result:

This will be right aligned.

This will be center aligned.

This will be left aligned.

Decorating the text: 

Following is the example which demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink..

<p style="text-decoration:underline;">
This will be underlined </p>
<p style="text-decoration:line-through;">
This will be striked through. </p>
<p style="text-decoration:overline;">
This will have a over line. </p>
<p style="text-decoration:blink;">
This text will have blinking effect </p>

This will produce following result:

This will be underlined

This will be striked through.

This will have a over line.

This text will have blinking effect