CSS Text

Through CSS Text, you can set the color of text, direction of text, letter spacing, letter indent, alignment of text like Left, Right, Center, Justify and many more.

Example:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>

<style type=“text/css”>
.text_color { color:#990000;}
.text_direction{ direction:rtl;}
.text_letter_spacing{ letter-spacing:10px;}
.text_letter_word{ word-spacing:10px;}
.text_letter_indent{ text-indent:2cm;}
.text_letter_align_center{ text-align:center;}
.text_letter_align_left{ text-align:left;}
.text_letter_align_right{ text-align:right;}
.text_letter_align_justify{ text-align:justify;}

</style>

</head>
<body>

<h2> Text color </h2>

The color property is used for color of a text.

<p class=“text_color”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<h2> Text Direction </h2>
The direction property is used for text direction.

<p class=“text_direction”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<h2> Text Letter Spacing </h2>

The letter-spacing property is used to subtract or add space between the letters.

<p class=“text_letter_spacing”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<h2> Text Letter Word </h2>

The Text Letter word property is used to subtract or add space between the word.

<p class=“text_letter_word”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<h2> Text Letter Indent </h2>

The Text Letter Indent property is used to indent the text of a paragraph.

<p class=“text_letter_indent”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<h2> Text Alignment </h2>

The Text Alignment property is used to align a text.

<p class=“text_letter_align_center”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<p class=“text_letter_align_left”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<p class=“text_letter_align_right”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

<p class=“text_letter_align_justify”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis, justo eu maximus tempor, ante ex scelerisque sem, vel auctor velit justo et nisl. Donec laoreet condimentum lorem nec facilisis. </p>

</body>
</html>



Leave a Reply

avatar
  Subscribe  
Notify of