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

I am a paragraph


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

I am a heading and my parent element has a class blue-text, so I am blue

I am a paragraph and my parent element has a class blue-text, so I am blue


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

I am centered

I am left-aligned

I am right-aligned


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

I am an uppercase example

I am an lowercase example

I am an capitalize example


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


Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.