Cheap "Color" Tricks, Part 4

This is the fourth article in a series of "Cheap Tricks with CSS". This little trick will change the overall cosmetic appearance of your web site's colors by simply changing the color codes that are controlled by a single, external CSS file.

If you have not read our other Cheap CSS Tricks, you can access them here: Part 1: Cheap "Link" Tricks - Part 2: Cheap "Link" Tricks - Part 3: Cheap "Font" Tricks

UhOh! Did I hear more shrill screams from all those web designers out there who use ordinary HTML? ;) And I do believe I heard heavy, uncontrollable sobbing from all those web template designers out there who use ordinary HTML. LOL ... not to worry though. Since you are a frequent visitor to BasicTemplates.com and likely a happy member, YOU are using CSS to control your color codes, because you are a smart cookie, right?

If not, read on to find out how simple it will make your life as a designer, and why a membership with BasicTemplates.com will bring your design skills and reputation to an all new level.

The most effective way to use CSS throughout your site is by using an external (linked) style sheet. Open the style sheet with any text editor such as Windows Notepad or NoteTab (there are many others). Edit the color tags everywhere they appear in the style sheet.

Select colors that compliment each other utilizing basic color theory and the Color Wheel or Color Schemer tools. Selecting the right colors for the right mood you wish to convey is a must for professional web design. If you are not familiar with color analysis theory, we highly advise studying this subject first. Using the wrong colors could be a critical error for your web site's online existence.

Before:
background-color: #BCB7A3;

After:
background-color: #B4C9F1;

Color codes in the exernal style sheet not only controls background colors, but many other essential color elements, ie. font colors, border colors, scrollbar colors, hightlight colors, etc.

Now let's compare two pages on our web site. The first page is using the current BasicTemplates color scheme in the first example. The second page is using a revised color scheme in the second example. Pretty cool, huh?

Do you see how much different the pages appear? This entire process included colorizing our logo image and background image in a graphics application as well as editing the color codes in the style sheet. Total Design Time: Less than 10 minutes!

In conclusion, in less than ten minutes we could have changed the color scheme on "every" page on our site. Now we ask once again, why would anyone utilize, purchase or design a web site or web template without external CSS?