CoffeeCup - HTML Editor, Flash & Web Design Software

Color coding tags is a bit like a paint-by-number. Every tag has its own unique color to differentiate it from the rest of the document. Color coding tags makes debugging a document much easier, since you can find things at a glance, instead of having to read every line of code. For instance, if you know all image tags are red, you can scan down the code for the color red, and locate all image tags very easily.

To configure your colors:

1.) On the Main Menu, go to Tools->Preferences.

2.) Towards the bottom of this pop-up window, you will see a box labeled "Editor Highlighting Colors and Options." To modify HTML document colors, click on the "Modify..." button.


2.) Click new, and type in any name you want. When you click ok, the Toolbar will appear empty.

3.) The window in the upper left hand corner displays the different types of text you can give color attributes to. This is called the element window, because it displays all of the different elements of HTML. The window in the bottom of the screen is an example of some HTML code. This is called the preview window, because you can preview any changes made here.

4.) For example, say you wanted to change all image tags to be red with a green background. In the element window, scroll down until HTML image tags appear, then click on it. Click on the foreground color. This will open up a small box with choices for color. Click on the color red. Before you do the same thing for the background color, uncheck the box marked "background" under the words "Use defaults for." Now you can change your background color to green.


5.) Once you have done this, you will notice in the preview window that the image tags are red with a green background. Click "Ok" to save your changes, or "Cancel" if you don't want to save changes. You can tweak these changes until you find something that suits you. Typically, you will want tags that you modify constantly to stick out, so you don't have to hunt them down every time you make a change. On the other hand, some tags, like the comment tag <!-- --> you don't have to change, so you you don't need a bright color sticking out at you (default is grey).