14. WCSS Color Properties


14.1. Setting Foreground and Background Colors (color and background-color Properties)

Two WCSS color properties, color and background-color, can be used to define the colors of an XHTML MP element rendered on the screen.

The color WCSS property is used to specify the foreground color, while the background-color WCSS property is used to specify the background color. Valid values for these two properties are color keywords (for example, black, white, blue, etc), RGB values (for example, rgb(255, 0, 0), rgb(100%, 0%, 0%), etc), or hexadecimal RGB values (for example, #ff0000, #fff, etc). If you want to obtain further information about color property values, you can go back to the "Common Types of Property Value: Color" section of this WAP CSS tutorial.

Here are some example WAP CSS style rules that demonstrate the usage of color and background-color:


color: red

color: rgb(255, 0, 0)

background-color: rgb(100%, 0%, 0%)

background-color: #ff0000

background-color: #f00


All the above property values (i.e. red, rgb(255, 0, 0), rgb(100%, 0%, 0%), #ff0000, #f00) represent the same color and they can be used interchangeably.

The following XHTML MP/WAP CSS example demonstrates how to set the foreground color and background color of table cells. This example can help you understand better how the color and background-color WAP CSS properties can be used.


(colorPropertiesEg1.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Setting Table Color</title>
  </head>

  <body>
    <table style="color: white; background-color: purple">
      <tr>
        <td>Cell A</td>
        <td>Cell B</td>
        <td>Cell C</td>
      </tr>

      <tr style="color: yellow; background-color: #0000ff">
        <td>Cell D</td>
        <td>Cell E</td>
        <td rowspan="2" style="color: rgb(255, 0, 0); background-color: rgb(100%, 100%, 0%)">Cell F</td>
      </tr>

      <tr>
        <td colspan="2">Cell G</td>
      </tr>
    </table>
  </body>
</html>


What we do in the above XHTML MP/WCSS example is like this:

The result of the example in a mobile phone browser is shown below:



Nokia Mobile Browser 4.0


Previous Page Page 21 of 39 Next Page


Feedback Form (Expand)

What do you think about this web page?