CSS Text Tutorials

Learn how to format and add styles to a text.

color Property

The color property is used to set the color of a text.

The HTML document has 2 examples on how to set the color of a text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> p.red { color:#ff0000; } p.blue { color:blue; } </style> </head> <body> <p class="red"> This text is red. </p> <p class="blue"> This text is blue. </p> </body> </html>

This text is red.

This text is blue.

text-align Property

The text-align property is used to align text horizontally. The text-align property values are: center, left, right or justify.

The HTML document below shows you an example of all 4 text-align property values applied to 4 paragraphs. The paragraphs are placed within a <div> element and it is given a width and border to more easily see the text-align property in action.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> #container { width:400px; margin:5px; padding:0; border:1px solid black; } p.center { text-align:center; font-size:20px; } p.justify { text-align:justify; font-size:20px; } p.left { text-align:left; font-size:20px; } p.right { text-align:right; font-size:20px; } </style> </head> <body> <div id="container"> <p class="center"> This text has a text-align property of center. This text has a text-align property of center. </p> <p class="justify"> This text has a text-align property value of justify. This text has a text-align property value of justify. </p> <p class="left"> This text has a text-align property value of left. </p> <p class="right"> This text has a text-align property value of right. This text has a text-align property value of right. </p> </div> </body> </html>

The code above would produce the paragraphs shown below.

This text has a text-align property of center. This text has a text-align property of center.

This text has a text-align property value of justify. This text has a text-align property value of justify.

This text has a text-align property value of left.

This text has a text-align property value of left.

letter-spacing Property

The letter-spacing property controls the amount of white space between the characters in a text.

The HTML document below show you 2 examples of how to control the spacing between characters using the letter-spacing property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> h1.one { letter-spacing:0; font-size:24px; color:black; } h1.two { letter-spacing:15px; font-size:24px; color:black; } </style> </head> <body> <h1 class="one"> This is some text. </h1> <h1 class="two"> This is some more text. </h1> </body> </html>

The HTML document would produce the text below.

This is some text.

This is some text.

word-spacing Property

The word-spacing property controls the spacing between words in a text.

The example below shows you how to use the word-spacing property to control the spacing between words.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> h1.one { word-spacing:0; font-size:24px; color:black; } h1.two { word-spacing:15px; font-size:24px; color:black; } </style> </head> <body> <h1 class="one"> This is some text. </h1> <h1 class="two"> This is some more text. </h1> </body> </html>

The HTML document would produce the text below.

This is some text.

This is some text.

text-decoration Property

The text-decoration property is used to add effects to text, for example, an underline. The text-decoration property values are: none, underline, line-through, overline and blink.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> p.none { text-decoration:none; } p.underline { text-decoration:underline; } p.line-through { text-decoration:line-through; } p.overline { text-decoration:overline; } p.blink { text-decoration:blink; } </style> </head> <body> <p class="none"> This text has a text-decoration property value of none. </p> <p class="underline"> This text has a text-decoration property value of underline. </p> <p class="line-through"> This text has a text-decoration property value of overline </p> <p class="overline"> This text has a text-decoration property value of overline. </p> <p class="blink"> This text has a text-decoration property value of blink. </p> </body> </html>

This text has a text-decoration property value of none.

This text has a text-decoration property value of underline.

This text has a text-decoration property value of line-through.

This text has a text-decoration property value of overline.

This text has a text-decoration property value of blink.

The text-decoration property is most commonly used to add an underline to a text link or to remove the underline. The CSS rules below show you how to add an underline to a text link and how to remove the underline of the text link when the user hovers over the text link.

a { text-decoration:underline; } a:hover { text-decoration:none; }

text-indent Property

The text-indent property is used to indent the first line of a block of text. The property value can be specified in number units or in a percentage of the width of the containing block.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> div.content { width:600px; border:1px solid black; } p.first { text-indent:100px; } p.second { text-indent:50%; } </style> </head> <body> <div class="content"> <p class="first"> This text has an indention of 100 pixels. </p> <p class="second"> This text has an indention of 50 percent of the width of its' <div> container which is 600 pixels wide. &l;t/p> </div> </body> </html>

The code above would produce a <div> container and the 2 paragraphs that are contained within it.

This text has an indention of 100 pixels.

This text has an indention of 50 percent of the width of its' <div> container which is 600 pixels wide.

text-transform Property

The text-transform property is used to specify uppercase or lowercase of every letter in a text or the first letter of each word in a text. The text-transform property values are: none, capitalize, uppercase or lowercase.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> p.none { text-transform:none; } p.capitalize { text-transform:capitalize; } p.uppercase { text-transform:uppercase; } p.lowercase { text-transform:lowercase; } </style> </head> <body> <p class="none"> This is a text. This is a text. this is a text. this is a text. </p> <p class="capitalize"> This is a text. This is a text. this is a text. this is a text. </p> <p class="uppercase"> This is a text. This is a text. this is a text. this is a text. </p> <p class="lowercase"> This is a text. This is a text. this is a text. this is a text. </p> </body> </html>

The code above would produce the paragraphs below.

This is a text. This is a text. this is a text. this is a text.

This is a text. This is a text. this is a text. this is a text.

This is a text. This is a text. this is a text. this is a text.

This is a text. This is a text. this is a text. this is a text.