Lesson Five

You may wonder why many web sites are plain, white or light, and boring. As any graphic designer will tell you, "No color is better than bad colors." The reason is red on your computer might look like brick red on one user's computer and hot pink or blazing orange on another. Sure, it wouldn't be so bad if it were just a thin line, but if it was your whole background, what might look great to you might look dreary or offensive to someone else. Remember back in Lesson One at the bottom of the fourth paragraph when we talked about browser-safe colors? Those colors are safe to use in most browsers. Just having safe colors doesn't mean that your site will appeal to everyone. In fact, in contradiction, most computers have a broad palette of colors, so it's alright to use any color scheme. Knowing which colors convey the message you are sending is equally important. Below is a table of colors and their emotional associations.

Just because you now know color emotions doesn't mean you can start mixing colors together just by their emotions and everything will be fine. You need to sit down and decide what your scheme will be. This is where a color wheel or palette comes in handy. We'd like to thank Jason Cranford Teague, author of CSS, DHTML, & AJAX; Fourth Edition, for providing excellent examples of online color scheme tools that you can use to decide what type of scheme you will use for your site. Below are the links he found:

• VisiBone Webmaster's Color Lab - Interactively allows you to compare colors side-by-side.
• Wellstyled.com's Color Scheme 2 Tool - An excellent color tool. Gives you many choices to choose from and customize.
• Slayer Office Color Palette Tool - Not only do you get to choose your own colors, but this one allows you to test random colors against your choices.

Now that you have your color choices picked out, you can start to alter the look and feel of your pages by setting the text and foreground color. Notice that the main header and the table heading are both two different colors. We did this with cascading style sheets by setting the color property of each tag similar to the line below:

color: #36F; (remember, if the values are the same for each color, only specify them once)

Setting the background color is similar to setting the foreground. Pretty much the only difference is one word and a dash:

background-color: #36F;

The default color for a background is none, so the parents background color will show through unless you set the child element background.

Setting the background image is as simple as setting the background color. With the images, you have three different properties you can control; repeat, attachment, and position. With repeat, you can set the image once or tile horizontally or vertically. You do this by typing:

background-repeat: repeat-x or y or no-repeat;

Repeating attachment allows you to fix the image to the background or to scroll with the page as the user scrolls up or down. This can be done by typing:

background-attachment: fixed or scroll;

With the position, you can set the exact position where you want the image to be on the page. This can be done either by setting the image down and to the left using positive values or up and to the right using negative values. The image setting below is set to the right and down:

background-position: -35px 20px;

Now that you know several of the background properties, you can save time and space by declaring them all at once. Below are some examples of how this can be done:

background: beige url(myimage.gif) no-repeat fixed left top;

background: #C3B2A1 url(background.gif) repeat-y right top;

background: #00A;

background: #FFF url(spirals.gif) repeat-x scroll;

Question: Interesting. I like how you can set the background to almost any setting you wish. What if I wanted to make a frame around my image...you know...like put a box around it? Can that be done?

Answer: You bet. In the next lesson, we'll learn how to set box properties.