How to Set the Background and Foreground Color

Doohickey

My pet rock is shedding.

In web design, the foreground color usually refers to the text color, and the background color is the page color. For a stunning visual example, the doohickey on the right shows the foreground color in yellow while the background color is purple. OK, maybe it isn't so stunning, but it's better than a poke in the stick with a sharp eye.

When coding the foreground color (text color), the term color is used to specify the CSS property. This differs from the background color, which uses the hyphenated term of background-color.

In the code example that follows, how to set the foreground and background colors for an entire web page is demonstrated:

body {color: # DAD9C2;
      background-color: #4D3722;}

With that in your external style sheet, any web page linked to that style sheet would have the text displayed in a dark brown color on a cream colored background unless it was overridden by an inline or embedded style, or a user style sheet.

Now you know how to add text color and background color to a web page. You can apply the color and background-color properties to any HTML element, although it doesn’t make a lot of sense for some elements and odd uses may not be supported by all browsers. Common uses include paragraphs, divisions, spans, tables, table data cells, headings, and of course, with the body element as shown above.

As with any CSS, you can also add the color and background color to any element using inline and embedded styles, as well as via an external style sheet. To make sure you understand the concept, we’ll add foreground and background colors to few more selectors to go with the body selector from the previous example:

Embedded or External Styles
h1 {color: #D77BA9;}
h2 {background-color: #E97443;}

Inline Style
<p style="background-color: burlywood;"> content </p>

With the first example I’ve changed the text color for h1 heading element. In the second example I've changed the background color for an h2 heading element. In the last example I've used an inline style rule to change the background color to "burlywood" in a paragraph.

Wow, that was a colorful tutorial.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]