How To Change Text Color Using HTML and CSS

Cascading Style Sheets (CSS) is the preferred method of changing text color, so first we will show the (archival) method of changing text color using inline HTML color codes, then we will move on to how to achieve the same effect using CSS.

Using Text Color (Hex) Codes

In order to change text colors, you will need two things:

1. A command to change the text.
2. A color (hex) code.

The color codes, as I mentioned above, are technically called hex codes. The codes are not very user friendly, so you'll need a chart to tell you what code makes what color. Well, I happen to have one right here: Click to go.

So You Want A Color Code, Huh?

Drop by, grab a six-pack of color code, and come on back.

Old School: Changing Text Colors on the Whole Page

You have the ability to change full-page text colors over four levels:

<TEXT="######"> -- This denotes the full-page text color.

<LINK="######"> -- This denotes the color of the links on your page.

<ALINK="######"> -- This denotes the color the link will flash when clicked upon.

<VLINK="######"> -- This denotes the colors of the links after they have been visited.

These commands come right after the <TITLE> commands. Again, in that position they affect everything on the page. Also... place them all together inside the same command along with any background commands. Something like this:

< BODY BGCOLOR="######" TEXT="######" LINK="######" VLINK="######">

Please note: When you write these codes, you can write them with a # sign in front of the hex code or not. It used to be that the symbol was required, but not any more. I still use it just because I started that way. You may want to just go with the six-digit code. Also make sure to place a space between each command and be sure to enclose it in quotation marks, like so:

<VLINK="#FFFFFF">

Old School: Changing Specific Word Color

But I only want to change one word's color

You'll use a color (hex) code to do the trick. Follow this formula:

It's a pain in the you-know-where, but it gets the job done. It works with all H commands and text size commands. Basically, if it's text, it'll work.

Using Cascading Style Sheets (CSS) to Change Text Colors

A quick intro to CSS is in order, so let's describe it a bit. CSS is used to define different elements on your web page. These elements include text colors, link colors, page background, tables, forms--just about every aspect of the style of the web page. You can use CSS inline, much like the HTML above, or you can, more preferably, include theh style sheet within the HEAD tags on your page, as in this example:

<STYLE type=text/css>
A:link {
 COLOR: red /*The color of the link*/
}
A:visited {
 COLOR: #800080 /*The color of the visited link*/
}
A:hover {
 COLOR: green /*The color of the mouseover or 'hover' link*/
}
BODY { COLOR: #800080 /*The color of all the other text within the body of the page*/
{ 
</STYLE>

Alternately, you can include the CSS that is between the STYLE tags above, and save it in a file that you could call "basic.css" which would be placed in the root directory of your website. You would then refer to that style sheet by using a link that goes between the HEAD tags in your web page, like this:

<link type="text/css" rel="stylesheet" href="basic.css">

As you can see in the example above, you can refer to the colors using traditional color names, or hex codes as described above.

The use of CSS is vastly superior to using inline FONT tags and such, as it separates the content of your site from the style of your site, simplifying the process as you create more pages or change the style of elements. If you are using an external style sheet, you can make the change once in the style sheet, and it will be applied to your entire site. If you choose to include the style sheet itself within the HEAD tags as shown above, then you will have to make those changes on every page on your site.

CSS is such a useful tool in your web developer arsenal, you should definitely take the time to read more about it.