CSS Text Example

First Page
Next Page

CSS Text Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Text Color Example</title>
      <style>
         body {
            color: red;
         }
         h1 {
            color: #7fff00;
         }
         p.ex {
            color: rgb(220,20,60);
         }
      </style>
   </head>
   <body>
      <h1>Wellcome to My Website</h1>
      <p>My Name is Ammu</p>
      <p class="ex">I Live in Telangana</p>
   </body>
</html>

Output

Text Direction Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Text Direction Example</title>
      <style>
         div.x1 {
            direction: rtl;
         }
         h1 {
            direction: ltr;
            color:red;
         }
         
      </style>
   </head>
   <body>
      <div>Wellcome to My Website</div>
      <h3>My Name is Ammu</h3>
      <div class="x1">I Live in Telangana</p>
   </body>
</html>

Output

Letter Spacing Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Letter Spacing Example</title>
      <style>
         h1 {
            letter-spacing: 3px;
            color:green;
         }
         h2 {
            letter-spacing: -4px;
            color:red;
         }
         
      </style>
   </head>
   <body>
      <h1>Wellcome to My Website</h1>
      <h2>My Name is Ammu</h2>
   </body>
</html>

Output

Text Indent Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Text Indent Example</title>
      <style>
         p {
            text-indent: 60px;
            color:green;
         }
      </style>
   </head>
   <body>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
         elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
         dolore magna aliquam erat volutpat. Ut wisi enim ad minim
         veniam, quis nostrud exerci tation ullamcorper suscipit 
         lobortis nisl ut aliquip ex ea commodo consequat. 
      </p>
   </body>
</html>

Output

Text Alignment Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Text Alignment Example</title>
      <style>
         h1 {
            text-align: center;
            color:green;
         }
         h2 {
            text-align: left;
            color:red;
         }
         h3 {
            text-align: right;
            color:blue;
         }
         
      </style>
   </head>
   <body>
      <h1>Wellcome to My Website</h1>
      <h2>My Name is Ammu</h2>
      <h3>I Live in Telangana</h3>
   </body>
</html>

Output

Decoration Text Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Text Decoration Example</title>
      <style>
         h1 {
            text-decoration: overline;
            color:green;
         }
         h2 {
            text-decoration: line-through;
            color:red;
         }
         h3 {
            text-decoration: underline;
            color:blue;
         }
         
      </style>
   </head>
   <body>
      <h1>Wellcome to My Website</h1>
      <h2>My Name is Ammu</h2>
      <h3>I Live in Telangana</h3>
   </body>
</html>

Output

Text Shadow Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Text Shadow Example</title>
      <style>
         h1 {
            text-shadow: 3px 3px #FF0000;
         }
         
      </style>
   </head>
   <body>
      <h1>Wellcome to My Website</h1>
      <h2>My Name is Ammu</h2>
   </body>
</html>

Output

First Page
Next Page