Whites and Grays | Beiges and Browns | Yellows | Pinks and Reds | Greens | Blues | HTML code
In HTML, you can indicate a background color for the whole page by adding the attribute bgcolor="name" within the body tag. (This is the older way of indicating a background color, part of transitional HTML 4.01.)
<html> <head> <title>Type Title of Web Page Here</title> </head> <body bgcolor="name"> Content of page appears here, text and images. </body> </html>
Or, you can include a color value for the body within a style sheet, body { background-color: name; }. (This is the newer, preferred way when writing strict HTML 4.01.)
<html>
<head>
<title>Type Title of Web Page Here</title>
<style type="text/css">
<!--
body { background-color: name; }
-->
</style>
</head>
<body>
Content of page appears here, text and images.
</body>
</html>
Almost all named colors are not web-safe colors, they will look different on different monitors, but named colors are convenient for memorizing your favorite color choices. A shorter list of sixteen named colors is part of the official HTML 4.01 specification.
| aqua | black | blue | fuchsia |
| gray | green | lime | maroon |
| navy | olive | purple | red |
| silver | teal | white | yellow |
Together with 'transparent', named colors can be used effectively with cascading style sheets. Text links can be made to act like javascript rollover buttons, changing background color as the viewer mouses over the link. The advantage to creating buttons without images is that page navigation will load instantly. You can do this by indicating different background colors for the hover and link classes for anchors. (Anchors mark the links on a page.) The World Wide Web Consortium's specification for CSS2 points out that the hover state should be listed below the link and visited states, and above the active state to allow the hover and active colors to show even with links that have been visited.
<style type="text/css">
A:link { color: black; background-color: transparent; text-decoration:none; }
A:visited { color: purple; background-color: transparent; text-decoration:underline; }
A:hover { color: white; background-color: green; }
A:active { color: yellow; background-color: green; }
</style>
References:
March 26, 2003.