CSS stands for Cascading Style Sheet. The term “style sheet” should not be new to anybody who uses a computer these days. MS Word and every other current word processor/layout application employes style sheets in one way or another to control formatting.

The problem is few users ever take the time to learn how to use styles and continue doing what they learned when using a typewriter: spaces and tabs.

A style sheet is just a document that has special instructions to control the presentation of a web page or entire web site. The actual instructions are applied to HTML tags. This is why using semantic markup is critical. If you create a bulleted list by typing five spaces and a dot rather than the correct <UL> tag style instructions meant to control how a <UL> looks will go unused.

For our purposes the way you apply a style is by adding a class declaration to a tag. You do that by viewing the HTML source of what you’re editing and adding “class=orangeText” or whatever color you would like to try. The list of colors we have available is presented below.

So you open a page for editing, click the view HTML button, pick a <p> tag where you would like to apply a color and make the <p> tag look like this:

<p class=”orangeText”>

Important gotchas: capitalization… note the lowercase “o” and the uppercase “T.” That is very important. The class declaration must match the capitalization used in the CSS document. Note also that in the CSS below that class names start with a dot, but when you use them in a class declaration there is no dot.

----------------------------------------------- */
/* =HandyClasses
----------------------------------------------- */

/* Text Color Classes */
.orangeText,
.orangeText *{
	color: #CEA429 !important;
}
.darkOrangeText,
.darkOrangeText *{
	color: #CD6306 !important;
}
.grayText,
.grayText *{
	color: #898989 !important;
}
.greenText,
.greenText *{
	color: #8EA554 !important;
}
.lightGreenText,
.lightGreenText *{
	color: #E4F3D8 !important;
}
.darkGreenText,
.darkGreenText *{
	color: #545608 !important;
}
.greenText2,
.greenText2 *{
	color: #B8BC1F !important;
}
.lightBlueText,
.lightBlueText *{
	color: #D3E3E2 !important;
}
.tealText,
.tealText *{
	color: #93B5B7 !important;
}