CSS Text

Text in CSS

In this you Learn how to manipulate CSS Text using CSS properties.

1. color: property is used to set the color of a text.
2. direction: property is used to set the text direction.
3. letter-spacing: The letter-spacing property specifies the space between characters in a text.
4. word-spacing: The word-spacing property specifies the space between words in a text. Just like the letter-spacing property, you can set the word-spacing values as normal, length, and inherit.
5. text-indent: The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text. Property values are length (px, pt, cm, em, etc.), %, and inherit.

6. text-align: The text-align property specifies the horizontal alignment of text in an element.
7. text-decoration: The text-decoration property specifies how the text will be decorated.
8. text-transform: The text-transform CSS property specifies how to capitalize an element’s text. For example, it can be used to make text appear with each word capitalized.
9. white-space: The white-space property specifies how white-space inside an element is handled. The values can be set as normal, inherit, nowrap, etc.
10. text-shadow: The text-shadow property adds shadow to text.


Set the Text Color:

Example:

<html>   
 <head>   
 </head>     
 <body>       
<p ><b>style = "color:red;"</b>
          This text will be written in red.       </p> 
   </body>
 </html>    

Set the Text Direction :

Example:

<html>
   <head>
   </head>

   <body>
      <p <b>style = "direction:rtl;"</b>>
         This text will be rendered from right to left
      </p>
   </body>
</html>

Set the Space between Characters:

Example:

<html>
   <head>
   </head>

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

Set the Space between Words:

Example:

<html>
   <head>
   </head>

   <body>
      <p <b>style = "word-spacing:5px;"</b>>
         This text is having space between words.
      </p>
   </body>
</html> 

Set the Text Indent:

Example:

<html>
   <head>
   </head>

   <body>
      <p <b>style = "text-indent:1cm;"</b>>
         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>
   </body>
</html>

Set the Text Alignment:

Example:

<html>
   <head>
   </head>

   <body>
      <p <b>style = "text-align:right;"</b>>
         This will be right aligned.
      </p>
      
      <p <b>style = "text-align:center;"</b>>
         This will be center aligned.
      </p>
      
      <p <b>style = "text-align:left;"</b>>
         This will be left aligned.
      </p>
   </body>
</html> 

Decorating the Text:

Example:

<html>
   <head>
   </head>

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

Set the Text Cases :

Example:

<html>
   <head>
   </head>

   <body>
      <p <b>style = "text-transform:capitalize;"</b>>
         This will be capitalized
      </p>
      
      <p <b>style = "text-transform:uppercase;"</b>>
         This will be in uppercase
      </p>
      
      <p <b>style = "text-transform:lowercase;"</b>>
         This will be in lowercase
      </p>
   </body>
</html> 

Set the White Space between Text :

Example:

<html>
   <head>
   </head>

   <body>
      <p <b>style = "white-space:pre;"</b>>
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html> 

Set the Text Shadow :

Example:

<html>
   <head>
   </head>

   <body>
      <p <b>style = "text-shadow:4px 4px 8px blue;"</b>>
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html> 

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *