2.3 Text

In addition to being able to specify and control fonts, CSS has some useful properties for controlling the text itself:

PropertyPurpose
letter-spacingDefines spacing between lettering
word-spacingDefines spacing between words
text-alignSpecifies the text justification (left, centre, right, justified)
text-decorationAdds an underline, overline, or line through
text-indentDefines an indent to first line of paragraphs
text-transformControls capitilisation

Letter Spacing

The letter-spacing property controls the spacing between text characters. For example:

h1	{letter-spacing: -1px;}

p	{letter-spacing: 2px;}

Here the headlines have 6px between the letters and paragraph text has 3px. A useful point to note with large headlines is that they do look better when the letters are closed together a touch, something graphic designers call kerning.

Word Spacing

The word-spacing property controls the spacing between words. For example:

p	{word-spacing: 10px;}

Here the words in the paragraph text are spaced by 10px.

Text Align

The text-align property controls the alignment of text. The options are: left, right, centred, justify (maintains straight left and right margins). For example:

h2	{text-align: left;}

td	{text-align: center;}

p	{text-align: justify;}

Here headings <h2> are aligned to the left, any table data <td> is centered, and paragraphs are justified like those in a novel or newspaper. This property is also very useful for controlling page layout as it can also be applied to the <body> tag.

Text Decoration

The text-decoration property makes it is possible to add different effects to text: underline, overline, or line through. For example:

h1	{text-decoration: underline;}

h2	{text-decoration: overline;}

h3 	{text-decoration: line-through;}

Here the main headlines <h1> are underlined, the sub-headlines <h2> have a line above the text and the sub-sub headlines <h3> have a line through the text.

Text Indent

The text-indent property applies an indent to the first line of a paragraph. For example:

p	{text-indent: 30px;}

Text Transform

The text-transform property controls the capitalization of text, regardless of how the original text looks in the HTML code. There are four possible values:

PropertyDescription
capitalizeCapitalizes the first letter of each word.
uppercaseConverts all text to uppercase.
lowercaseConverts all text to lowercase.
noneThe text is presented as it appears in the HTML code.

For example:

p	{text-transform: capitalize;}