5.6 CSS text properties

Other text alterations

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


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


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;}


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;}
People always make the mistake of thinking art is created for them. But really, art is a private language for sophisticates to congratulate themselves on their superiority to the rest of the world. As my artist’s statement explains, my work is utterly incomprehensible and is therefore full of deep significance.

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.


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);}

Hello World

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!

Back to top

Learn CSS with my ebook

This ebook is a step by step guide in which I teach you how to build your own personal webpage from scratch, line by line, with HTML5, CSS3, and even JS.

CSS in 44 minutes book cover
Get it now