Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Colors

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.

Here’s an example of how to set the foreground and background colors for an entire web page:

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. Hey, how about that … those colors are like coffee and cream, which I happen to be drinking as I write this page. Coincidence, or destiny?

Yes, I am being silly ... intentionally. Are we having fun yet? I am!

Now you know how to add text color and background color to a web page. You can apply the same color and background-color properties to many HTML elements.

Common uses include: paragraphs, divisions, spans, tables, table data cells, headings, and of course, the body element.

With CSS you can 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:

h1 {color: #D77BA9;}

div {color: #3708A3; 
     background-color: # CFCDB4;}

<p style="background-color: yellow;"> content </p>

With that we’ve changed the text color for an H1 heading element, and created a division with a foreground and background color using embedded or external style code. In the third example we’ve used an inline style rule to change the background color to yellow for a paragraph element. Wow, now that’s what I call a colorful tutorial.

Check out this style sheets tutorial to find out more about inline, embedded, and external CSS methods.