- You are here:
- WebsiteTips Home
- Articles, Tutorials, Tips
- CSS
- Convert Content to CSS
- Step 3
Converting Existing Content to CSS, Step 3
Basic Colors with CSS
by Shirley E. Kaiser, M.A., SKDesigns
Copyright © 2001-2021, 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:
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.)
Tip:
Wondering what colors to use? Need to know corresponding HTML color codes? Visit WebsiteTips.com's Web Site Resources Color
Color Tools Section for:
- WebsiteTips.com's free online or printable color charts and elsewhere
- WebsiteTips.com's free online color scheme tools, including our
- Color Blender Color Scheme Tool (choose 2 colors, tool generates 1-10 shades between them)
- Colormatch Remix Color Scheme Tool (choose schemes with 9 harmonious colors)
- Colour Scheme Chooser (monochromatic, analogic, complimentary, split complementary, triadic, and double contrast colour schemes)
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.