Basic Colors with CSS
by Shirley E. Kaiser, M.A., SKDesigns
Copyright © 2001-2017, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at websitetips.com 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.
On this page:
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:
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:
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.)
- WebsiteTips.com's free online or printable color charts and elsewhere
- WebsiteTips.com's free online color scheme tools, including our
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.