Web Color Basics
Adding color to your page, to be inline with current standards, requires the application of appropriate styles to the page. You can find out more about Styles by following the tabs above.
But first, a note about colors. In the old days, when monitors could only display 256 colors, you had to be careful to use only "web-safe" color codes. But today's monitors, for the most part, don't have this limitation and any color you can imagine or concoct can probably be displayed correctly. You refer to colors by a hexadecimal code.
You can find charts of colors with their codes easily on the web, but as usual, I like to go to the official source for this information. W3Schools has this color picker. They also have a listing of 140 colors that can be used with just a color name instead of the code (there's even "Dodger Blue"!).
Editors like Dreamweaver let you select colors from a palette and then put the code in for you. But, as always, the more you can know about what's going on under the hood, the better web designer you'll be.
Backgrounds: Color
It's easy to use styles to make the background color for your page always display the way you want (unless a reader's browser settings override your style sheet). The easiest way to assign colors (and other properties as well, such as text colors, link properties, fonts, etc.) to the whole page is in the <body> tag. The following code, inserted in the <body> tag at the top of your document, will automatically make the background color white for the whole page:
<body style="background-color:#FFFFFF">
(See "Web Color Basics" above for a discussion of the hexadecimal color codes and how to use them, plus links to comprehensive charts of color codes.)
It's a good idea to add the text display attribute, too, in your <body> tag, if you set the background color to a shade radically different from the usual white or gray. You want to be sure that the text your readers see on the background color is readable. For example, if you set the background color to black and don't force the text color to be a lighter color, it will disappear into the darkness! (The link display attributes need to be set, too, but not in the body tag. See the Styles: Usage tab for how to do this.)
Here's an example of a body tag that's got everything specified to set the background color to navy and the text color to yellow:
<body style="background-color:#000099; color:#FFFF00">
Remember that putting these attributes in your <body> tag applies them across the entire document. You can apply background colors to sub-elements of the page such as paragraphs or table cells, by inserting style attributes into the tags.
For example, to make a nice turquoise background for a paragraph, type this:
<p style="background-color: #CCFFFF">This is a paragraph with a turquoise background</p>
Here's how it would display:
This is a paragraph with a turquoise background.
You'll notice that the background really does cover the whole paragraph element, not just where there's text. If you want only your text to be backgrounded, use the <span></span> tags. For example:
<p><span style="background-color:#000099;color:#FFFF00">Here's a yellow on navy span of text.</span></p>
which would display like this:
Here's a yellow-on-navy span of text.
The current generation of styles offers more sophisticated, fancy, color effects, like partial transparency, that I don't have much experience with. Check it out at W3Schools.
Backgrounds: Images
You can make images into backgrounds, too, as well as just plain colors.
The property that sets the image is background-image. This is the syntax of the style attribute, to go into the body tag if you want it to apply to the whole page.
style="background-image: url(xxx.xxx)" (xxx.xxx, of course, is the name of the graphic file)
The property that governs tiling is background-repeat, and its values can be no-repeat (which will display the image a single time), repeat (which is just the default tiling option), and repeat-x or repeat-y. These last values will cause the image to be tiled horizontally or vertically, respectively.
The code I used to make an image the background of this section of my page (delineated by <div></div> tags) is the following:
<div style="background-image: url('images/42original.gif')">
42original.gif is a small image designed to be tiled that I found at a site that no longer offers graphics, but you can find plenty of others on the Web.
You can also use images for the backgrounds of table cells and other elements on your page. For more details on using styles to display background images see Styles: Usage above.
As with colors, be cautious with background images. Even some graphics designed to be backgrounds can make text difficult to read. Specify a color that makes your text readable on the background, and test your pages on different monitors and in different browsers to be sure.
The current generation of styles offers more flexible background image properties, like designated sizing and cropping, that I'm not that familiar with. Check it out at W3Schools.
Other Graphic Credits
The stylish line divider, and the cute notepad, graphics came from Realm Graphics, a nice free graphics site.
