CSS Text Tutorial | CSS Text Decoration | CSS Text Effects
×

CSS Text

3502

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>



Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments