CSS Text

CSS/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{

            color: red;

            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