Welcome to Developer's Home Sunday, April 20, 2014
Home - DevelopersHome.com

Common Types of Property Value


Preferences - Do not show ads

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


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


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


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 Previous Page | Next Page
Contents at a Glance
Print this Web Page | | Back to Top
Custom Search

Feedback Form (Expand)

What do you think about this web page?






WCSS Tutorial Table of Contents WCSS Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page