CSS Text Styling

CSS provides properties which allow the user to format and style the text of the web page.

The most popular CSS properties you can apply to the text in order to style it are:

Text Color
Text Decoration
Text Alignment
Text Spacing
Text Shadow
Text Transformation

The text Color property

a {color: red;}

The text Decoration property

This property is broken down to the following properties and values for each one:

text-decoration-color: any other color
text-decoration-line: overline | line-through | underline | overline underline;
text-decoration-style: solid | double | dotted | wavy | dashed
text-decoration-thickness: auto | 10% | 3px (this property accepts numeric values)
text-decoration: overline blue dotted 10%; (this is the shorthand version of the text decoration property combining all of the above)

The text Alignment property

This property will set the text alignment.

text-align: center | left | right | justify

The text Shadow property

text-shadow: 3px 3px 5px blue;

The text Spacing property

This property is broken down to the following properties and their respective values:

letter-spacing: numeric values (inclunding negative values)
line-height: numeric values (inclunding negative values)
text-indent: numeric values (inclunding negative values)
word-spacing: numeric values (inclunding negative values)
white-space: pre | nowrap | normal | pre-line | pre-wrap | initial | inherit;

The text Transformation property

This property will transform the text on your web page.

text-transform: uppercase | lowercase | capitalize;

Try all of the above using our editor:

The Text properties in action:

                 
                  
    <style>
      #coloredtxt {color: tomato;}
      #shadowtxt {text-shadow: 3px 3px 5px blue;}
      #aligntxt {text-align: center;}
      #decoratetxt{text-decoration-line:line-through;}
      #spacingtxt {letter-spacing:3px;}
      #decorateme {text-decoration: overline blue dotted 10%;}

    </style>

      <p id="colortxt">This is a paragraph.</p>

      <p id="shadowtxt">This is a paragraph.</p>

      <p id="aligntxt">This is a paragraph.</p>

      <p id="decoratetxt">This is a paragraph.</p>

      <p id="spacingtxt">This is a paragraph.</p>

      <p id="decorateme">This is a paragraph.</p>

The output:

This is a paragraph.