11. Common Types of Property Value

Many WCSS properties accept the same type of property values. For example, you assign a length value to define the border width, margin and padding, and a color value to define the foreground color, background color and border color.

There are three common types of property value in WAP CSS cascading style sheets:

Length
Color
URL

11.1. Length

Length values are used to define heights, widths, thicknesses, etc. A length value can be of the following units:

% -- Percentage
px -- Pixel
em -- Font size of the element. For example, if the current font size is 12 points, 1 em = 12 points and 2.5 em = 30 points
ex -- x-height of the element's font. x-height means the height of the "x" character. Typically, it is equal to 1/2 of the font size. For example, if the current font size is 12 points, 1 ex = 6 points and 2.5 ex = 15 points
cm -- Centimeter
mm -- Millimeter
in -- Inch
pt -- Point. 1 pt = 1/72 in
pc -- Pica. 1 pc = 12 pt

Examples of WCSS style statements:

p {margin: 10%}
h1 {margin-top: 1cm}
table {border: 2px solid black}

Note that there is no space between the value and the unit. For example, you should use "margin-top: 1px" instead of "margin-top: 1 px".

11.2. Color

A color is represented by a RGB (Red Green Blue) value in WAP CSS cascading style sheets. For example, the white color is consisted of 100% red, 100% green and 100% blue, and the red color is consisted of 100% red, 0% green and 0% blue.

There are four ways to specify a RGB value in WAP CSS. They are described in the following table.

Different ways to specify a RGB value in WCSS

Examples of WCSS statement

rgb(r%, g%, b%)

r, g and b can be any value from 0 to 100.

p {color: rgb(100%, 100%, 100%)} specifies the white color as the text color of paragraphs.

h1 {color: rgb(100%, 0%, 0%)} specifies the red color as the text color of level-1 headings.

rgb(r, g, b)

r, g and b can be any value from 0 to 255.

p {color: rgb(255, 255, 255)} specifies the white color as the text color of paragraphs.

h1 {color: rgb(255, 0, 0)} specifies the red color as the text color of level-1 headings.

#rrggbb

r, g and b can be any hexadecimal digit (i.e. 0-9, a-f). So, the maximum value that can be assigned to each color source is ff (255 in decimal) and the minimum value is 00 (0 in decimal).

p {color: #ffffff} specifies the white color as the text color of paragraphs.

h1 {color: #ff0000} specifies the red color as the text color of level-1 headings.

#rgb

This is the short form of the #rrggbb format. r, g and b can be any hexadecimal digit (0-9, a-f). The conversion from the #rgb format to the #rrggbb format can be achieved by duplicating the digit of each color source. For example, the red color is represented as #f00 in the #rgb format, and #ff0000 in the #rrggbb format.

p {color: #fff} specifies the white color as the text color of paragraphs.

h1 {color: #f00} specifies the red color as the text color of level-1 headings.

The following 16 colors are predefined in the WCSS standard. You can specify their color names directly to properties. For example, the WCSS style "p {color: blue}" specifies the blue color as the text color of paragraphs.

Predefined colors in WCSS	RGB value	RGB hexadecimal value
Aqua	rgb(0, 255, 255)	#00ffff
Black	rgb(0, 0, 0)	#000000
Blue	rgb(0, 0, 255)	#0000ff
Fuchsia	rgb(255, 0, 255)	#ff00ff
Gray	rgb(128, 128, 128)	#808080
Green	rgb(0, 128, 0)	#008000
Lime	rgb(0, 255, 0)	#00ff00
Maroon	rgb(128, 0, 0)	#800000
Navy	rgb(0, 0, 128)	#000080
Olive	rgb(128, 128, 0)	#808000
Purple	rgb(128, 0, 128)	#800080
Red	rgb(255, 0, 0)	#ff0000
Silver	rgb(192, 192, 192)	#c0c0c0
Teal	rgb(0, 128, 128)	#008080
White	rgb(255, 255, 255)	#ffffff
Yellow	rgb(255, 255, 0)	#ffff00

11.3. URL

URL values are used to specify the location of some files in WCSS cascading style sheets. A URL property value is placed inside the parentheses of url().

Here are some examples:

ul {list-style-image: url(bullet.gif)}
table {background-image: url(http://www.developershome.com/wap/wcss/image.gif)}

Some people like to enclose URLs within double quotes or single quotes. Such syntax is also valid in WCSS.

ul {list-style-image: url("bullet.gif")}
table {background-image: url('http://www.developershome.com/wap/wcss/image.gif')}

If a relative URL is included in an external style sheet, the URL will be referenced relative to the location of the external style sheet instead of the XHTML MP document.

Page 14 of 39

Contents at a Glance (Click Here for Full Table of Contents)

Print this Web Page | | Back to Top

Feedback Form (Expand Collapse)