- Web Design Tutorials, Tips, Top Resources

Converting Existing Content to CSS, Step 3

Basic Colors with CSS

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

Copyright © 2001-2016, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at with permission.

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.

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

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 {


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.)


Wondering what colors to use? Need to know corresponding HTML color codes? Visit's Web Site Resources Color Color Tools Section for:

In addition, our Color Resources section also has annotated links to great tutorials all about color, books on color, color management, and hardware and software to calibrate and manage colors.

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with 

Our Other Sites


Effective, accessible, standards-based Web site design since 1996

SKDesigns -

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves

Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation