Colors for Text and Backgrounds

Style sheet properties that apply to colors can be changed dynamically. In the following table are the stylesheet properties pertaining to foreground (text) and background colors, along with the Document Object Model references to these same properties.

CSS and DOM Reference	Values
color:color object.style.color="color"	Foreground color specified as a color name, hexadecimal value, or RGB value: color:red color:#FF0000 color:rgb(255,0,0)
background-color:color object.style.backgroundColor="color"	Background color specified as a color name, hexadecimal value, or RGB value: background-color:red background-color:#FF0000 background-color:rgb(255,0,0)

Figure 10-6. Color styles.

Colors can be specified by one of the recognized color names or as a color value given in hexadecimal or RGB (red, green, blue) values. The RGB specification can be a decimal value (0 - 255) representing the intensity of the color: rgb(255,120,0), or it can be a percentage of the maximum intensity of the color: rgb(10%,20%,30%).

Changing Text Colors

You can see the effects of these color settings and changes in the paragraph below by clicking the "Switch Colors" button.

Here is a paragraph of text with foreground and background color settings. These settings are changed by clicking the following button.

Figure 10-7. Switching foreground and background color styles.

<script type="text/javascript">

function SwitchColors() {
  if (document.getElementById("PAR").style.color == "red") {
    document.getElementById("PAR").style.color = "white";
    document.getElementById("PAR").style.backgroundColor = "red"; 
  } else {
    document.getElementById("PAR").style.color = "red";
    document.getElementById("PAR").style.backgroundColor = "white"; 
  }
}
</script>

<p id="PAR" style="border:solid 1; padding:10; color:red; background-color:white; 
font-size:12pt; font-weight:bold">
  Here is a paragraph of text with foreground and background color settings.
  These settings are changed by clicking the following button.
</p>

<input type="button" value="Switch Colors" onclick="SwitchColors()"/>

Listing 10-6. Code to switch foreground and background color styles.

The <p> tag contains a style attribute to initially set the foreground and background color of the paragraph. When the button is clicked, function SwitchColors() alternates between the foreground and background colors. An if statement tests the current foreground color. If it is red, then the foreground color is changed to white and the background color is changed to red. Otherwise, the paragraph is given red text on a white background.

Changing Button Colors

An effective use of colors is in designing your own buttons. The following button, for instance, illustrates the use of colors to provide visual clues to mouse activities surrounding it.

Figure 10-8. Using color styles as visual clues to mouse actions.

<input type="button" value="Click Me" style="color:white; background-color:steelblue"
  onmouseover="this.style.color='black'; this.style.backgroundColor='lightblue'"
  onmouseout="this.style.color='white'; this.style.backgroundColor='steelblue'"
  onmousedown="this.style.color='white'; this.style.backgroundColor='red'"
  onmouseup="this.style.color='black'; this.style.backgroundColor='lightblue'"/>

Listing 10-7. Code to use color styles as visual clues to mouse actions.

Once again, if multiple buttons on the same page need to share this styling, then the script should be moved to a function that can be called from all of the buttons.

Figure 10-9. Calling functions for color style changes.

<script type="text/javascript">

function MouseOver(Which) {
  Which.style.color = "black";
  Which.style.backgroundColor = "lightblue";
}

function MouseOut(Which) {
  Which.style.color = "white";
  Which.style.backgroundColor = "steelblue";
}

function MouseDown(Which) {
  Which.style.color = "white";
  Which.style.backgroundColor = "red";
}

function MouseUp(Which) {
  Which.style.color = "black";
  Which.style.backgroundColor = "lightblue";
}
</script>

<input type="button" value="Click Me" style="color:white; background-color:steelblue"
  onmouseover="MouseOver(this)" onmouseout="MouseOut(this)"
  onmousedown="MouseDown(this)" onmouseup="MouseUp(this)"/>
<input type="button" value="Click Me" style="color:white; background-color:steelblue"
  onmouseover="MouseOver(this)" onmouseout="MouseOut(this)"
  onmousedown="MouseDown(this)" onmouseup="MouseUp(this)"/>
<input type="button" value="Click Me" style="color:white; background-color:steelblue"
  onmouseover="MouseOver(this)" onmouseout="MouseOut(this)"
  onmousedown="MouseDown(this)" onmouseup="MouseUp(this)"/>

Listing 10-8. Code to call functions for color style changes.

Table Colors

In the following table of cursor shapes, the background color of the table cells changes to gray (#E0E0E0) when the cursor is moved over the cell, providing a visual clue to the cell over which the mouse is positioned. Also, the cursor changes to the shape identified by the cell text.

default	pointer	crosshair
move	text	wait
n-resize	ne-resize	nw-resize
s-resize	se-resize	sw-resize
e-resize	w-resize	help

Figure 10-10. Changing table cell colors and cursors.

In this example, a function is called on a mouseover event associated with the table cell. Two parameters are passed to the function: a self identification of the cell (this) and the name of the cursor shape (this.innerHTML) given by the text in the cell. A second function is called on a mouseout event to revert to normal cell styling.

<script type="text/javascript">

function Set(Cell,Cursor) {
  Cell.style.backgroundColor = "#E0E0E0";
  Cell.style.cursor = Cursor;
}

function Reset(Cell) {
  Cell.style.backgroundColor = "#FFFFFF";
}
</script>

<table border="1" cellpadding="5">
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">default</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">hand</td> 	
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">crosshair</td> 	
</tr>
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">move</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">text</td> 	
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">wait</td> 	
</tr>
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">n-resize</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">ne-resize</td> 	
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">nw-resize</td> 	
</tr>
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">s-resize</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">se-resize</td> 	
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">sw-resize</td> 	
</tr>
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">e-resize</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">w-resize</td> 	
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">help</td> 	
</tr>
</table>

Listing 10-9. Code to change table cell colors and cursors.

Note that the innerText property of a table cell refers to the text appearing between its <td> and </td> tags. Also, the mouse cursor automatically reverts to its default styling when not explicitly set. It is not necessary, in other words, for the mouseout function to include the statement Cell.style.cursor = "default".

You are probably familiar with tables that look like the following, containing a column of links along with one or more additional columns describing the links.

Link	Url	Description
Google	www.google.com	Google has many special features to help you to find exactly what you're looking for.
AltaVista	www.altavista.com	The AltaVista Toolbar is free, customizable, and gives you the research tools to perform searches from your browser.
Yahoo!	www.yahoo.com	The Yahoo! Music Engine brings you a new and powerful way to enjoy and explore music on your PC.

Figure 10-11. Table cells with links.

Below is an interesting variation on such a table, using background colors to highlight the selected table row and making the row itself a link.

Link	Url	Description
Google	http://www.google.com	Google has many special features to help you to find exactly what you're looking for.
AltaVista	http://www.altavista.com	The AltaVista Toolbar is free, customizable, and gives you the research tools to perform searches from your browser.
Yahoo!	http://www.yahoo.com	The Yahoo! Music Engine brings you a new and powerful way to enjoy and explore music on your PC.

Figure 10-12. Styling table rows as links.

<script type="text/javascript">

function RowOn(Row) {
  Row.style.backgroundColor = "#A0A0A0";
  Row.style.color="#FFFFFF";
  Row.style.cursor = "hand";
}

function RowOff(Row) {
  Row.style.backgroundColor = "#FFFFFF";
  Row.style.color="#000000";
}

function RowDown(Row) {
  Row.style.backgroundColor = "#FF0000";
}

</script>

<table border="1" cellpadding="2">
<tr>
  <th>Link</th>
  <th>Url</th>
  <th>Description</th>
</tr>
<tr onmouseover="RowOn(this)"  onmouseout="RowOff(this)" 
    onmousedown="RowDown(this)" onmouseup="RowOn(this)"
    onclick="open('http://www.google.com','','')">
  <td>Google</td>
  <td>www.google.com</td>
  <td>Google has many special features to help you to find exactly what
      you're looking for.</td>
</tr>
<tr onmouseover="RowOn(this)"  onmouseout="RowOff(this)" 
    onmousedown="RowDown(this)" onmouseup="RowOn(this)"
    onclick="open('http://www.altavista.com','','')">
  <td>AltaVista</td>
  <td>www.altavista.com</td>
  <td>The AltaVista Toolbar is free, customizable, and gives you the
      research tools to perform searches from your browser.</td>
</tr>
<tr onmouseover="RowOn(this)"  onmouseout="RowOff(this)" 
    onmousedown="RowDown(this)" onmouseup="RowOn(this)"
    onclick="open('http://www.yahoo.com','','')">
  <td>Yahoo!</td>
  <td>www.yahoo.com</td>
  <td>The Yahoo! Music Engine brings you a new and powerful way to enjoy
      and explore music on your PC.</td>
</tr>
</table>

Listing 10-10. Code to style table rows as links.

Each table row, <tr>, contains event handlers to respond to mouseover, mouseout, mousedown, and mouseup events. These event handlers pass their self references to the functions, which set the color of that particular row. These generalized functions perform the common style settings for all the rows. The onclick handlers for the rows, however, need individual scripts to link to individual URLs. In this case, sites are opened in secondary windows.

Form Colors

Colors can be applied dynamically to form elements to provide visual clues to their selection. In the following example, a text field changes its background color when text is being entered.

Enter text:

Figure 10-13. Styling a textbox on data entry.

Enter text: 
<input type="text" 
  onfocus="this.style.backgroundColor='sandybrown'; this.style.color='white'"
  onblur="this.style.backgroundColor='white'; this.style.color='black'"/>

Listing 10-11. Code to style a textbox on data entry.

This effect is produced using onfocus and onblur event handlers. The former traps the event where focus is brought to the textbox, when the user clicks inside the box; the latter traps the event where focus is removed from the textbox, when the user clicks or tabs out of the field.

In the above coding examples, various techniques are employed to activate style changes. Sometimes JavaScript statements are coded in-line, within the event handler of the tag to be changed; in other cases statements are packaged in a JavaScript function which is called from the tag. There is no rule about the technique to use. It pretty much depends on your preferred style of coding. You will certainly run into situations that need a particular technique, and these will be obvious. Otherwise, you should adopt a comfortable, workable coding style and be consistent about it.

Web Development Tutorials

Colors for Text and Backgrounds

Changing Text Colors

Changing Button Colors

Table Colors

Form Colors

TOP | NEXT: Borders, Padding, & Margins