CSS text

Text Color

The color property is used to set the color of the text.

                      .blue-text {
                        color: blue;
                      }
                  

                      <p class="blue-text">I am a paragraph</p>
                  

Live preview

Note: If you set a color value to the parent element, all the children elements will inherit the color.

                        .blue-text {
                          color: blue;
                        }
                    

                      <div class="blue-text">
      
                          <h3>I am a heading and my parent element has a class <code>blue-text

Live preview

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Live preview

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

                  .uppercase-example {
                    text-transform: uppercase;
                  }
        
                  .lowercase-example {
                    text-transform: lowercase;
                  }
        
                  .capitalize-example {
                    text-transform: capitalize;
                  }
                  

                  <p class="uppercase-example">I am an uppercase example</p>
                  <p class="lowercase-example">I am an lowercase example</p>
                  <p class="capitalize-example">I am an capitalize example</p>
                

Live preview

Note: There are many more ways to modify the text, but you will learn about them in future lessons.