Introduction to Dynamic HTML: Properties of STYLE

Common STYLE Properties

position Specifies how the block should be positioned on the page with respect to other page elements. Possible values:

"position:absolute;" Block is positioned absolutely within the browser window, relative to <BODY> block.
"position:relative;" Block is positioned relative to its parent block, if any, or else normal flow of page.
"position:static;" Block is positioned according to standard HTML layout rules -- follows flow of document. (MSIE 4+ only; Netscape 5?)

width Specifies the width at which the block's contents should wrap. You may specify width in measured units (50px), as a percentage of the parent block's width (50%), or auto which wraps the block according to its parent's width.

Examples: "width:50px;" or "width:50%;"

height Specifies the height of the block, measured in units (50px), percentage of the parent block's height (50%), or auto. Note that the height of the block will be forced to the minimum necessary to display its contents; however, you can make the block taller than necessary.

Examples: "height:50px;" or "height:50%;"

left Specifies the offset of the left edge of the block in accordance with the position attribute. Positive measures (5px) are offset towards the right while negative measures (-5px) are offset towards the left.

Examples: "left:5px;" or "left:-5px;"

top Specified the offset from the top edge of the block in accordance with the position attribute. Positive measures (5px) are offset towards the bottom of the page while negative measures (-5px) are offset towards the top of the page.

Examples: "top:10px;" or "top:-10px;"

clip Specifies a rectangular portion of the block which is visible. Typically, you use the clip property if you want to show only a portion of the block, therefore hiding a portion. Syntax:

MSIE: clip:rect(top right bottom left)
Example: "clip:rect(0px 30px 50px 0px);"

Netscape: clip:rect(left,top,right,bottom)
Example: "clip:rect(0,0,30,50);"

Notice that the syntaxes vary between browsers, both in the need to specify measurement units (MSIE) and the order of the parameters.

visibility Specifies whether a block should be visible. If not visible, the block will not appear on the page, although you can make it visible later using JavaScript. The possible values for this property again vary between browsers.

MSIE:
"visibility:inherit;" Block inherits the visibility property of its parent.
"visibility:visible;" Block is visible.
"visibility:hidden;" Block is invisible.

Netscape:
"visibility:inherit;" Block inherits the visibility property of its parent.
"visibility:show;" Block is visible.
"visibility:hide;" Block is invisible.

z-index Specifies the "stacking order" of blocks, should they happen to overlap other positioned blocks. A block is assigned a z-index, which is any integer. When blocks overlap, that which has the greater positive z-index appears above a block with a lower z-index. Blocks with an equal z-index value are stacked according to the order in which they appear in the source code (bottom-to-top: first block defined appears on bottom, last block defined appears on top).

Example: "z-index:3;"

background-color Specifies the background color for the block.

Examples: "background-color:green;" or "background-color:FF8F00;"

background-image Specifies a background image for the block.

Example: "background-image:url('images/tilewood.jpg');"

position	Specifies how the block should be positioned on the page with respect to other page elements. Possible values: "position:absolute;" Block is positioned absolutely within the browser window, relative to <BODY> block. "position:relative;" Block is positioned relative to its parent block, if any, or else normal flow of page. "position:static;" Block is positioned according to standard HTML layout rules -- follows flow of document. (MSIE 4+ only; Netscape 5?)
width	Specifies the width at which the block's contents should wrap. You may specify width in measured units (50px), as a percentage of the parent block's width (50%), or auto which wraps the block according to its parent's width. Examples: "width:50px;" or "width:50%;"
height	Specifies the height of the block, measured in units (50px), percentage of the parent block's height (50%), or auto. Note that the height of the block will be forced to the minimum necessary to display its contents; however, you can make the block taller than necessary. Examples: "height:50px;" or "height:50%;"
left	Specifies the offset of the left edge of the block in accordance with the position attribute. Positive measures (5px) are offset towards the right while negative measures (-5px) are offset towards the left. Examples: "left:5px;" or "left:-5px;"
top	Specified the offset from the top edge of the block in accordance with the position attribute. Positive measures (5px) are offset towards the bottom of the page while negative measures (-5px) are offset towards the top of the page. Examples: "top:10px;" or "top:-10px;"
clip	Specifies a rectangular portion of the block which is visible. Typically, you use the clip property if you want to show only a portion of the block, therefore hiding a portion. Syntax: MSIE: clip:rect(top right bottom left) Example: "clip:rect(0px 30px 50px 0px);" Netscape: clip:rect(left,top,right,bottom) Example: "clip:rect(0,0,30,50);" Notice that the syntaxes vary between browsers, both in the need to specify measurement units (MSIE) and the order of the parameters.
visibility	Specifies whether a block should be visible. If not visible, the block will not appear on the page, although you can make it visible later using JavaScript. The possible values for this property again vary between browsers. MSIE: "visibility:inherit;" Block inherits the visibility property of its parent. "visibility:visible;" Block is visible. "visibility:hidden;" Block is invisible. Netscape: "visibility:inherit;" Block inherits the visibility property of its parent. "visibility:show;" Block is visible. "visibility:hide;" Block is invisible.
z-index	Specifies the "stacking order" of blocks, should they happen to overlap other positioned blocks. A block is assigned a z-index, which is any integer. When blocks overlap, that which has the greater positive z-index appears above a block with a lower z-index. Blocks with an equal z-index value are stacked according to the order in which they appear in the source code (bottom-to-top: first block defined appears on bottom, last block defined appears on top). Example: "z-index:3;"
background-color	Specifies the background color for the block. Examples: "background-color:green;" or "background-color:FF8F00;"
background-image	Specifies a background image for the block. Example: "background-image:url('images/tilewood.jpg');"