Welcome to the CSS tutorial, we already covered css fonts, CSS backgrounds and CSS color. Today we will talk about CSS text, as we knew that CSS fonts can be used to format text, and CSS text will go hand to hand with CSS fonts and it will let you to control the text further improvements.

  • Text color – It will simply set the color of the text. You can use direct color name available in CSS, If you know the hex value, then can use it.
  • Text decoration – If you don’t want to see underlines in hyperlinks, then can use this property to remove the underlines.
  • Text transform – You can use this property to change the case of the letter, sentence, and paragraphs. You can quickly convert lower case to upper case and upper case to lower case letters.
  • Text align – It will help you to align your text to the right, center, or left.
  • Text indentation – You can avoid using <pre>, or (&nbsp), if you want to indent your paragraphs. Text indent will let you indent your paragraphs.

Learn CSS text

Tips to Remember

  • Text alignment is not for the vertical alignment, it means you can set horizontal alignment only.
  • If you want to align element vertically, then use vertical-align instead of text-align.
  • You can use justified as a text alignment property, which will make every line in equal width.
  • You can use RGB values in place of the hex or direct color name, while setting the color for the text.


CSS text – Example

Let’s try to understand the use of the above attributes in our CSS text example, because you should know how to use text properties and how does it looks like in practice. We will use text color, text align, text decoration and text transformation property in one example. Let’s see the code and then the result of it:




       h2.color {

                  color: blue;


       h2.align {

                  text-align: center;


              a {

                  text-decoration: line-through;


              p.upper {

                        text-transform: uppercase;





<h2 class="color">SharpLesson is in Blue</h2>

<h2 class="align"><a href="http://sharplesson.com">SharpLesson</a></h2>

<p class="upper">it will convert it into uppercase.</p>



When we will run the above code, we will get result like:

css text example

You can clearly figure out what we did in the above example, we used blue color, instead of removing underlines, I used the line through to let you see the use of CSS text decoration. At last we just converted lower case letter to the upper case letter.

Note: If you want to see the complete set of CSS text properties, then do refer our CSS reference. There you can check, text-shadow, Unicode-bidi, text-shadow and many more.


We have just covered CSS text and its properties, remember to practice, because practice makes men perfect. Enjoy your visit at SharpLesson, get more examples to practice, and if you want a complete tutorial to your desktop, then get your solution.

What next? Next we will learn about CSS images.

If you liked our content on CSS Text, then share, like, tweet  or bookmark us for future reference. We believe in sharing a quality and that is what our people are doing, now it is your turn to do that, spread the word of fun education and let’s try to sharp as many people we can.