Alongside the several font-* properties, CSS provides many text-* properties.

text-align

The text-align property must be applied on a block-level element and defines how its text and children inline elements are horizontally aligned.

body{ text-align: left;}

The most used values are:

• left
• right
• center
• justify

These values correspond to the same alignment buttons you find in Microsoft Word or Photohop:

The justify value is not recommended. Although it might look visually appealing because it forms a rectangle of text, it is very hard to read.

The text-align default value is start. Basically, start can either be left or right, depending on the direction set on the HTML document.

direction is a CSS property that can either be ltr (left to right) or rtl (right to left):

• if ltr is chosen, start equals to left
• if rtl is chosen, start equals to right

text-decoration

The text-decoration property is used to add a line on your text.

Default value: none

.deleted{ text-decoration: line-through;}

Possible values:

• overline
• underline
• line-through

By default, HTML links (<a>) have a text-decoration: underline; applied to them. One of the first things coders usually do is to remove this default styling:

a{ text-decoration: none;}

text-indent

The text-indent property allows to add space before the first letter of the first line of a block-level element.

Default value: 0 (zero)

blockquote{ text-indent: 30px;}

Notice how only the first line is indented. If you want to offset the whole block of text, use paddings.

As for the font-size property, you can use px, em, or even % values.

text-shadow

If you’ve ever used Photoshop, you’ve probably used the drop shadow tool. In CSS, you can add shadow to a text, to make it either fancier or more readable.

You define:

• x the horizontal offset
• y the vertical offset
• the blur
• the color

h1{ text-shadow: 0 2px 5px rgba(0,0,0,0.5);}

Only the x and y values are required. The blur defaults to 0 (zero), while the color defaults to the color of the text.

This property is tricky, so use it with parsimony and don’t go crazy!