CSS Text Code Tutorials

How to set the color of text with CSS

The code below 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>Web Development Tutorials.com</title>

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

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

The code above creates the headings and paragraph below.

This is a level 1 heading

This is a level 3 heading

This is a paragraph

Use the text editor below to practice what you have learned.

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>Web Development Tutorials.com</title>

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

</head>
<body>
<span class="backgroundcolor">This text has a red background. </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 text has a red background. </span>
</p>
</body>
</html>

The above code makes the paragraph below.

This text has a red background. 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 text has a red background.

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.one {letter-spacing: -3px;}
h1.two {letter-spacing: 3px;}
h3 {letter-spacing: 0.5cm;}
</style>

</head>
<body>
<h1 class="one">This is a level 1 heading</h1>
<h1 class="two">This is another level 1 heading</h1>
<h3>This is a level 3 heading</h3>
</body>
</html>

The above code makes the level 1 and 3 headings below.

This is a level 1 heading

This is another level 1 heading

This is a level 3 heading

How to specify the space between lines

The 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>Web Development Tutorials.com</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 web browsers is about 110% to 120%. The default line height in most web browsers is about 110% to 120%. The default line height in most web browsers is about 110% to 120%. The default line height in most web browsers is about 110% to 120%.
</p>
<p class="one">
This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%.
</p>
<p class="two">
This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%.
</p>
</body>
</html>

The code example above makes the 3 paragraphs below.

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

This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%. This paragraph has a line-height of 90%.

This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%. This paragraph has a line-height of 200%.