© Copyright 2003 by BasicTips.com, division of BasicTemplates.com
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?
Return to CSS Tutorial Index
Get
your Business Domain Name for only $9.95,
Right Here, Right Now!
|
