CSS Text Code Tutorial

You can define the appearance of text with the use of CSS text properties.

How to set the color of text

The below HTML and CSS code example shows you how to set the color of text with CSS.

<!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>this is the title of the web page</title>

<style type="text/css">
h1 {color: #00ff00;}
h3 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>

</head>
<body>
<h1>
This is a level 1 header
</h1>
<h3>
This is a level 3 header
</h3>
<p>
This is a paragraph
</p>
</body>
</html>

The above HTML and CSS code makes the level 1 and 2 headings and the paragraph below.

This is a level 1 header

This is a level 3 header

This is a paragraph

Enter the HTML and CSS code into the textbox below to set the color of some text.

How to set the background color of text

The below HTML and CSS code example shows you how to set the background color of text with CSS.

<!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>this is the title of the web page</title>

<style type="text/css">
span.backgroundcolor
{
background-color:yellow;
}
</style>

</head>
<body>
<span class="backgroundcolor">This is a text.</span> This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. <span class="backgroundcolor">This is a text.</span>
</p>
</body>
</html>

The above HTML and CSS code make the paragraph below.

This is a text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is a text.

How to increase or decrease the space between characters

The HTML and CSS code example below shows you how to increase or decrease the space between characters.

<!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>this is the title of the web page</title>

<style type="text/css">
h1
{letter-spacing: -3px;}
h3
{letter-spacing: 0.5cm;}
</style>

</head>
<body>
<h1>This is a level 1 header</h1>
<h3>This is a level 3 header</h3>
</body>
</html>

The above HTML and CSS code make the level 1 and 2 headings below.

This is a level 1 header

This is a level 3 header

How to specify the space between lines

The HTML and CSS code example below shows you how to specify the space between lines.

<!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>this is the title of the web page</title>

<style type="text/css">
p.one
{
line-height: 90%; }
p.two
{
line-height: 200%;
}
</style>

</head>
<body>
<p>
This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%. This is a paragraph with a standard line-height. This is a paragraph with a standard line-height.
</p>
<p class="one">
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>
<p class="two">
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>
</body>
</html>

The above HTML and CSS code example makes the 3 paragraphs below.

This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%. This is a paragraph with a standard line-height. This is a paragraph with a standard line-height.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.