XHTML Lesson 2: Background and Text Colors

The first graphical Web browsers used a light gray background on all pages. Today most Web browsers will render your page with a white background unless you specify another color. It is important to make your wishes known. Before CSS the way we did this was to add color attributes to the <body> tag. That method of indicating colors is now outdated but is still supported by all current browsers. CSS is a better option today for specifying page colors but it is important to know the old style of coding as well.

The official named colors are white, black, green, maroon, olive, navy, purple, gray, red, yellow, blue, teal, lime, aqua, fuchsia, and silver. Millions of other colors can be specified by using hexadecimal code (for example #66FFFF indicates a powder blue color). In the assignment below you will create a simple page to allow you to experiment with different color combinations.

Assignment:

Type the code below into any text editor and save it with the name "lesson02.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here. After you create this page, open it in your Web browser. Change the colors in your code to experiment with different combinations. Save the changes then reload the page in your Web browser to see the effects.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Lesson 2: Colors</title>
</head>
<body bgcolor="silver" text="maroon">
<h1>Background and Text Colors</h1>
<p>The official named colors are white, black, green, maroon, olive, navy, purple, gray, red, yellow, blue, teal, lime, aqua, fuchsia, and silver. Millions of other colors can be specified by using hexadecimal code (for example #66FFFF indicates a powder blue color).</p>
<p>This page has been set to use silver as a background color and maroon as a text color. Please be aware that this method of indicating colors is outdated. CSS is a better option today for specifying page colors but it is important to know the old style of coding as well.</p>
</body>
</html>

A Detailed Explanation:

The text within the document itself explains much. This old method of indicating color choices uses attributes of the <body> tag. You will learn a better way to style Web pages in the lessons on CSS.

<body bgcolor="silver" text="maroon">

Including these outdated attributes means that the !DOCTYPE for this page has to be set to XHTML 1.0 Transitional rather than scrict XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Previous Lesson | Next Lesson