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.


<?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">
    <title>Setting Table Color</title>

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

      <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>

        <td colspan="2">Cell G</td>

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 (ExpandCollapse)

What do you think about this web page?

(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.

A button for going back to the top of this page