Converting Existing Content to CSS, Step 3

Basic Colors with CSS

by Shirley E. Kaiser, M.A., SKDesigns

For Step 3 of this tutorial we'll add a background color and a font color to the CSS style block that we set up previously in Step 2: Style Blocks.

On this page:

Step 3: Basic Colors

Also within this tutorial, Converting Existing Content to CSS:

Let's add some basic style rules to designate a page background color and a text color. For the sake of this tutorial, we'll use the following color palette:

Color Palette
1	2	3	4	5

`#fffff0`	`#336666`	`#669966`	`#999966`	`#669999`

The most basic style rules are to add a background color and a text, or font, color to the body element. Some browsers will otherwise display a gray or other color background and a font color that you may not have in mind or that might not be very readable.

For the first entry to the style sheet, then, let's add these basics. The 'background' attribute shown below refers to the background color of your Web page, and the 'color' attribute refers to the font color. Here's what it looks like added to the style block between the style element tags, as highlighted below:

<style type="text/css">

body { background:#fffff0; color:#336666; }

</style>

Here's what your markup should look like now. The new style rules are shown in bold red text:

Markup with basic style rules added. (A separate window will open.)