CSS Text


Text Color:

The color property is used to set the color of the text. In CSS the text color is most often specified by:

  • Hex values like "#fff"
  • RGB values like "RGB(30,40,50)"
  • A color name like "yellow"

The default color for a page is defined in the body of the selector.

Example

 <style type="text/css">

 

        p{

            /* Color name*/

            color: red;

           }

           h1{

            /* RGB values*/

            color: RGB(100, 200, 100);

           }

           h2 {

            /* HEX Code*/

            color: #adbb;

           }

           </style>

       

            <p> This Color value  by color name</p>

            <h1>This Color value  by RGB values </h1>

            <h2>This Color value by HEX Code </h2>

 

Text Alignment: 

The text-align property is used to set the horizontal alignment of the text. Text can be centered or aligned to the left or right, or justified. When text-align is set to "justify" each line is stretched so that every line has equal width and the left and the right margins are straight like newspapers.

Example

 <style type="text/css">

 

        p{

           

            colorred;

            text-align: center;

       

           }

           h1{

            color:RGB(100, 200, 100);

            text-align: left;

           }

           h2 {

           

            color:#adbb;

            text-align: right;

           }

           </style>

       

            <p> Text Alignment Center</p>

            <h1>Text Alignment Left </h1>

            <h2>Text Alignment Right </h2>

Result:


Text Decoration: 

The text-decoration property is used to set or remove decorations for the text. The text-decoration property is mostly used to remove underlines for links for design purposes.

Example:

 <style type="text/css">

 

        a{

            text-decoration: none;

           }

         p{

            text-decoration: line-through

           }

           h1{

            text-decoration: overline;

           }

           h2 {

           

            text-decoration: underline;

           }

           </style>

           <a href="">Text Decoration none</a>

           <p> Text Decoration line-through</p>

            <h1>Text Decoration overline</h1>

            <h2>Text Decoration underline </h2>

Result:



Text Transformation: 

The txt-transformation property is used to specify uppercase and lowercase in text. It can be used to turn everything into uppercase and lowercase letters, or capitalize the first letter of the word.

Example

<style type="text/css">

        p{

           text-transform: uppercase;

          }

          h1{

           text-transform: lowercase;

          }

          h2 {

         

           text-transform: capitalize;

          }

          </style>

           <p> text transformation uppercase</p>

           <h1>TEXT TRANSFORMATION LOWERCASE</h1>

           <h2>text transformation capitalize </h2>

Result:



Text Indentation: 
The text-indentation property is used to specify the indentation of the first line of the text.

Example

 p{

    text-indent: 20px;

   }



CSS Text Properties

PropertyDescription
clolor
Set the color of the text.
direction
specifies the text direction/writing direction.
letter-spacing
Increases or decreases the space between characters in the text.
line-hight
Set the line height.
text-align
Specifies the horizontal alignment of text.
text-decoration
Specifies the decoration add to the text.
text-indent
Specifies the indentation of the first line in a text block.
text-shadow
Specifies the shadow effect added to the text.
text-transform
Controls the capitalization of text.
vertical-align
Sets the vertical alignment of an element.
white-space
 Specifies how white space inside an element is handled.
word-spacing
 Increases or decreases the space between the word in a text.


Leave a comment
No Cmomments yet