Changing Background Colors @ OWDC

LESSON 1-06-01: Changing Background Colors

Web Design Lessons > Lesson 1-06-01: Changing Background Colors

Previous Lesson | Lesson Index | Next Lesson

This section of your free online web design course is going to teach you how to add a background color to your HTML documents, HTML tables, table cells and even your texts! We're going to start off by adding a background color to the whole web page.

HTML Document Background Colors

In order to change the background color of your HTML document, we are going to add a special attribute, called "bgcolor", to the <body> tag, and assign a color value to this attribute.

Copy & paste the below HTML code to create a blank HTML document with a black background:

The output of the above HTML code is below:

We can set the value for the "bgcolor" attribute as a color hex code as well. Let's set it to "#99CCFF", which is a web safe color (Sidenote: If you do not know what I am talking about, go to Lesson 1-04 to learn all about web safe colors and color hex codes):

The above HTML code will produce a blank HTML document with "#99CCFF" as the background color:

HTML Table Background Colors

We're going to continue our free online web design course by learning how to add a background color to tables. It is very similar to adding a background color to an HTML document, as the same attribute (bgcolor) is used to assign a background color to a table. We'll insert the bgcolor attribute inside the <table> tag just like we did with the body tag above:

<html>
<head>

</head>
<body bgcolor="#99CCFF">

<table bgcolor="#FFCC00">
<tr>
<td>
Table Contents Go Here
</td>
</tr>
</table>

</body>
</html>

In the above HTML code, we have created a table with a background color of "#FFCC00" inside an HTML document which has a background color of "#99CCFF". The output of this code is below:

Table Contents Go Here

As we did not define a table border in the source code, our table doesn't have borders, but the background color still makes it visible.

HTML Table Cell Background Colors

Next in Online Web Design Course, we're going to learn how to add a background color to individual cells of a table. This is achieved by using the "bgcolor" attrribute with the <td> tags. Below is an example HTML code:

<html>
<head>

</head>
<body bgcolor="#99CCFF">

<table bgcolor="#FFCC00">
<tr>
<td bgcolor="#FFFFCC">
Table Cell 1
</td>
<td bgcolor="#CCFFFF">
Table Cell 2
</td>
</tr>
</table>

</body>
</html>

As you can see, we have added the "bgcolor" attribute to both of the <td> tags. Let's see what the above HTML code looks like in a browser:

Table Cell 1

Table Cell 2

Hmmm... Looks like we have "borders", although we never assigned a "border" attribute to our table. What may be wrong?

Those are not real borders, but the background color of our table leaking out from some "cracks". The reason we see the background color of our table is that the default "cellspacing" attribute of our table is set to "2". We see the background color through these "2-pixel-spaces" between cells. If we set the "cellspacing" attribute to "0", we'll not see through these spaces anymore, so our fake border will be removed. Below is the HTML code for that:

<html>
<head>

</head>
<body bgcolor="#99CCFF">

<table bgcolor="#FFCC00" cellspacing="0">
<tr>
<td bgcolor="#FFFFCC">
Table Cell 1
</td>
<td bgcolor="#CCFFFF">
Table Cell 2
</td>
</tr>
</table>

</body>
</html>

And we'll get a borderless table with two different-color cells:

Table Cell 1

Table Cell 2

Sidenote: In order to get around the border problem, we could simply remove the background color for our table (and making it transparent), instead of adding a cellspacing attribute! Like this:

<html>
<head>

</head>
<body bgcolor="#99CCFF">

<table>
<tr>
<td bgcolor="#FFFFCC">
Table Cell 1
</td>
<td bgcolor="#CCFFFF">
Table Cell 2
</td>
</tr>
</table>

</body>
</html>

The above HTML code will create the same effect, except that there will still be a 2-pixel-space between the two cells:

Table Cell 1

Table Cell 2

Text Background Colors

The last part of this section of our free online web design course is going to explore how to add a background color to texts. To achieve this effect, we're going to use Cascading Style Sheets (or shortly "CSS"), which we'll cover in much greater depth later on in our online web design course.

In order to add a background color to texts, we are going to use the <span> tag and the "style" attribute together. The <span> tag is going to help us determine the starting and ending points of our effect, and the "style" attribute is going to do the actual work of adding a background color. Have a look at the below HTML code to get a clearer picture:

<html>
<head>

</head>
<body>

This is plain text
<br><br>

<span style="background-color:#CCCCFF">
This is text with a background color
</span>

<br><br>
This is plain text again

</body>
</html>

The above HTML code will produce the below output:

This is plain text

This is text with a background color

This is plain text again

The "style" attribute is genereally used as style="property:value". In the above example, our property is "background-color" and our value is "#CCCCFF", which is the hex code of the color I have selected as background color for our text.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

We've learned how to add background colors. How about background images? Next lesson of Online Web Design Course is going to teach you how to add background images to your HTML documents!

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-04 Web Colors Unleashed
• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration

• Lesson 1-06-01 Changing background colors

• Lesson 1-06-02 Adding background images

• Lesson 1-06-03 Background - foreground conflicts
• Lesson 1-07 Images
• Lesson 1-08 Hyperlinking

Back To Top

BACKGROUND ALTERATION!

HTML Document Background Colors

HTML Table Background Colors

HTML Table Cell Background Colors

Text Background Colors