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:

  1. Length

  2. Color

  3. URL


11.1. Length

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

Examples of WCSS style statements:

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:

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

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.


Previous Page Page 14 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