Text - CSS Tutorial 5

Text

Formatting and adding style to text is a key issue for any web designer. In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be described:

• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform

Text indention [text-indent]

The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with <p>:

 
 p {
  text-indent: 30px;
 }
 
 

You will get the result as below :

Text indention

Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema. 

Text alignment [text-align]

The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right or centred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. You know this layout from for example newspapers and magazines.

In the example below the text in table headings <th> is aligned to the right while the table data<td> are centred. In addition, normal text paragraphs are justified:

 
 th {
  text-align: right;
 }

 td {
  text-align: center;
 }

 p {
  text-align: justify;
 }
 
 

You will get this result : 

Text alignment

Text alignmen in table

Heading 1	Heading 2
Cell 1	Cell 2
Cell 3	Cell 4

Justified text in paragraphs

Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema.

Text decoration [text-decoration]

The property text-decoration makes it is possible to add different "decorations" or "effects" to text. For example, you can underline the text, have a line through or above the text, etc. In the following example, <h1> are underlined headlines, <h2> are headlines with a line above the text and <h3> are headlines with a line though the text.

 
 h1 {
  text-decoration: underline;
 }

 h2 {
  text-decoration: overline;
 }

 h3 {
  text-decoration: line-through;
 }
 
 

You will get this result : 

This text is underlined

This text is overlined

This text is lined trough

Letter space [letter-spacing]

The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used.

 
 h1 {
  letter-spacing: 6px;
 }

 p {
  letter-spacing: 3px;
 }
 
 

You will get this result : 

Space between text characters

Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.

Text transformation [text-transform]

The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code.

An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform:

capitalize

Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".

uppercase

Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".

lowercase

Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".

none

No transformations - the text is presented as it appears in the HTML code.

As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.

Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase.

 
 h1 {
  text-transform: uppercase;
 }

 li {
  text-transform: capitalize;
 }
 
 

You will get this result :

THIS HEADING IS UPPERCASE

• Peter Hanson
• Max Larson
• Joe Doe
• Paula Jones
• Monica Lewinsky
• Donald Duck

Notice, how we with CSS makes all the names capitalized

Conclusion

So this was our fifth tutorial of CSS that was about text. In the last three lessons you have already learned several CSS properties, but there is much more to do in CSS. In the next lesson we will take a look at links.

Browse More Articles

Tweet

Written by Unknown

Unknown is one of the Team Member of Programmer vs Hacker. He has written many articles on this website and is a patner of this website.