Learn Scripting Languages from the Master!
for the web
PrintUsing background colors
By default, browsers display a white or gray background color to fill the entire browser window. To make web pages or parts of web pages appealing and interesting for the web users, you may add background colors. For a corporate web site, you can use your company's standard colors. For a personal website, you may use your own favorite colors. Use of colors in these instances helps you achieve common theme among web pages.
When using colors, pay attention to how text contrast with the background color of your web document. If the background color is dark, then set a light color for text. Conversely, if background color is light, use a dark color for text.
Low contrast results in poor readability of the information on the webpages. High contrast results in greater readability, on the other hand. See table 1 for the effect on readability of the information with varying color choices for document background and text.
| Table 1 effect on readability of color choices | |||
|---|---|---|---|
| Background color | Text color | Contrast | Readability |
| Light | Dark | High | High |
| Light | Light | Low | Low |
| Dark | Light | High | High |
| Dark | Dark | Low | Low |
So table 1 used as a guide, you may use:
- light background color with dark text for high contrast and greater readability, or
- dark background color with light text for high contrast and greater readability
Conversely, the table suggests avoid use of:
- light background and light color for text because it results in poor contrast and reduced readability
- dark text on dark background also results in poor contrast and reduced readability
Specifying background colors
To specify background color for your web page, use the bgcolor attribute. This attribute is added to the opening body tag. The following is an example of this:
<body bgcolor="#FF0000"> ..... <body>
This sets the background of the page to red. Table 2 lists some other examples of setting background colors for webpages.
| Table 2 examples of setting background colors for XHTML pages with bgcolor attribute | ||
|---|---|---|
| Markup | Meaning | Output |
<body bgcolor="#000000"> ..... <body> |
Sets background of the page to black | |
<body bgcolor="#8E236B"> ..... <body> |
Sets background of the page to Maroon | |
<body bgcolor="#3232CD"> ..... <body> |
Sets background of the page to Medium Blue | |
<body bgcolor="#EAEAAE"> ..... <body> |
Sets background of the page to Medium Golden Rod | |
<body bgcolor="#808000"> ..... <body> |
Sets background of the page to Olive | |
As an alternative to the use of bgcolor and greater future portability, use the style sheet specification to set the background colors for XHTML documents. Table 3 shows the examples shown in table table 2 with the use of style sheets. With style sheets, you can set the background colors in one place instead of inserting bgcolor attribute in the individual pages.
| Table 3 examples of setting background colors for XHTML pages using style sheet specifications | ||
|---|---|---|
| CSS Markup | Meaning | Output |
body{background-color:#000000;} |
Sets background color to Black | |
body{background-color:#8E236B;} |
Sets background color to Maroon | |
body{background-color:#3232CD;} |
Sets background color to Medium Blue | |
body{background-color:#EAEAAE;} |
Sets background color to Medium Golden Rod | |
body{background-color:#808000;} |
Sets background color to Olive | |