CSS TEXT

CSS TEXT

CSS text is used to manipulate text. Here are some properties that can be used to change text.

CSS table properties

  • The color property is used to set the color of a text.
  • The direction property is used to set the text direction.
  • The letter-spacing property is used to add or subtract space between the letters that make up a word.
  • The word-spacing property is used to add or subtract space between the words of a sentence.
  • The text-indent property is used to indent the text of a paragraph.
  • The text-align property is used to align the text of a document.
  • The text-decoration property is used to underline, overline, and strikethrough text.
  • The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
  • The white-space property is used to control the flow and formatting of text.
  • The text-shadow property is used to set the text shadow around a text.

examples

Text Color

This property can have two values collapse and separate. The following example uses both the values.The following example demonstrates how to set the text color. Possible value could be any color name in any valid format. 

      
                    <!DOCTYPE html>	 
color:tomato;

Text Direction

      
                    direction:rtl

Space between Characters

he following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space 

      
                    letter-spacing:8px;

Space between Words

The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space. 

      
                    text-indent:2cm;

Text Alignment

The following example demonstrates how to align a text. Possible values are left, right, center, justify. 

      
                    text-align:right;
text-align:center;
text-align:left;

Decorating the Text

The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink. 

      
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
text-decoration:blink;

Text Cases

The following example demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase. 

      
                    text-transform:capitalize
text-transform:uppercase;
text-transform:lowercase;

White Space between Text

The following example demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap. it just like the HTML pre tag.. 

      
                    white-space:pre;

Text Shadow

The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<body>
<p style ="white-space:pre;"> 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>
<p style ="text-transform:lowercase;"> This will be in lowercase. </p>
<p style ="text-align:left;"> this will be aligned to the left </p>
<p style ="letter-spacing:8px;">   This text is having space between letters. </p>
<p style ="direction:rtl;">  This text will be rendered from right to left </p>
<p style ="text-decoration:underline;"> This will be underlined </p>
<p style ="text-decoration:overline;"> This will be striked through. </p>
<p style ="text-decoration:line-through;"> This will have a over line </p>
<p style ="text-decoration:blink;"> This text will have blinking effect </p>
<p style ="text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadow property, 
this text will have a  blue shadow.  </p>
</body>
</html>

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1