block | inline | list-item | none

block: The element will be displayed as a block-level element, with a line break before and after the element. Netscape 4.0, Internet Explorer 5.0

inline : The element will be displayed as an inline element, with no line break before or after the element. Netscape 7.0, Internet Explorer 4.0

list-item : The element will be displayed as a list. Netscape 4.0, Internet Explorer 4.0

none : The element will not be displayed. Netscape 4.0, Internet Explorer 4.0

Notes in IE 4.0: "display: none" on block elements take up place (insert a linefeed)

Notes in IE 5.0: "display: inline" does not work properly on lists and list items

Notes in Netscape 4.x:

• "display: block" on inline elements, input fields, and images insert a linefeed before
• "display: inline" on block elements insert a linefeed after
• "display: inline" does not work properly on list items and definition lists
• "display: list-item" places a line-break before and after the element
• "display: list-item" on ordered lists make it behave like unordered lists
• "display: list-item" on list items insert a line-break before the content of the list item
• "display: list-item" on a table header and table data indents the content within the cell
• "display: none" on block elements take up place (insert a linefeed)
• "display: none" does not work on definition lists and selection lists
  

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

Example:

Source code:

<p>&lt;div style=&quot;display: none&quot;&gt;...&lt;/div&gt;<br>
START div HERE&gt;</p>
<div style="display: none"><p>This paragraph should not be displayed.</p>
</div>
<p>&lt;END div HERE</p>

Output:

<div style="display: none">...</div>
START div HERE>

<END div HERE

Example:

Source code:

<p>&lt;p style=&quot;display: inline&quot;&gt;...&lt;/p&gt;<br>
START p HERE&gt;</p>
<p style="display: inline">This first paragraph has
&lt;p style=&quot;display: inline&quot;&gt;...&lt;/p&gt;.
However, it does not displayed inline with the previous paragraph.</p>
<p style="display: inline">This second paragraph also has
&lt;p style=&quot;display: inline&quot;&gt;...&lt;/p&gt;. It
should be displayed inline with the previous paragraph.</p>
<p>&lt;END p HERE</p>

Output:

<p style="display: inline">...</p>
START p HERE>

This first paragraph has <p style="display: inline">...</p>. However, it does not displayed inline with the previous paragraph.

This second paragraph also has <p style="display: inline">...</p>. It should be displayed inline with the previous paragraph.

<END p HERE

Example:

Source code:

<style>
p.block_yellow_bgcolor { display: none; background-color: yellow }
</style>
<p class="block_yellow_bgcolor">This paragraph should not be displayed.</p>
<p class="block_yellow_bgcolor" style="display: block">Now, this
paragraph should be displayed with yellow background color.</p>

Output:

This paragraph should not be displayed.

Now, this paragraph should be displayed with yellow background color.

normal | pre | nowrap

normal : White-space is ignored by the browser. Netscape 4.0, Internet Explorer 5.5

pre : White-space is preserved by the browser. Acts like the <pre> tag in HTML. Netscape 4.0

nowrap : The text will never wrap, it continues on the same line until a <br> tag is encountered. Netscape 6.0, Internet Explorer 5.5

PRE { white-space: pre }
P { white-space: normal }

Example:

Source code:

    <p style="whitespace: normal; background-color: yellow">This is a long paragraph with
    normal whitespace and yellow background. This is a long paragraph with
    normal whitespace and yellow background. This is a long paragraph with
    normal whitespace and yellow background.</p>
    <p style="whitespace: nowrap; background-color: yellow">This is a long paragraph with
    nowrap whitespace and yellow background. This is a long paragraph with
    nowrap whitespace and yellow background. This is a long paragraph with
    nowrap whitespace and yellow background.</p>
    <p style="whitespace: pre; background-color: yellow">This is a long paragraph with
    pre whitespace and yellow background. This is a long paragraph with
    pre whitespace and yellow background. This is a long paragraph with
    pre whitespace and yellow background.</p>

Output:

This is a long paragraph with normal whitespace and yellow background. This is a long paragraph with normal whitespace and yellow background. This is a long paragraph with normal whitespace and yellow background.

This is a long paragraph with nowrap whitespace and yellow background. This is a long paragraph with nowrap whitespace and yellow background. This is a long paragraph with nowrap whitespace and yellow background.

This is a long paragraph with pre whitespace and yellow background. This is a long paragraph with pre whitespace and yellow background. This is a long paragraph with pre whitespace and yellow background.

[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit

url : The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list. Netscape 6.0 only.

Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used

auto : The UA determines the cursor to display based on the current context

crosshair : A simple crosshair (e.g., short line segments resembling a "+" sign).

default : The platform-dependent default cursor. Often rendered as an arrow.

pointer : The cursor is a pointer that indicates a link.

move : Indicates something is to be moved.

e-resize : The cursor indicates that an edge of a box is to be moved right (east)

ne-resize : The cursor indicates that an edge of a box is to be moved up and right (north/east)

nw-resize : The cursor indicates that an edge of a box is to be moved up and left (north/west)

n-resize : The cursor indicates that an edge of a box is to be moved up (north)

se-resize : The cursor indicates that an edge of a box is to be moved down and right (south/east)

sw-resize : The cursor indicates that an edge of a box is to be moved down and left (south/west)

s-resize : The cursor indicates that an edge of a box is to be moved down (south)

w-resize : The cursor indicates that an edge of a box is to be moved left (west

text : Indicates text that may be selected. Often rendered as an I-bar.

wait : Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

help : Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

Netscape 6.0, Internet Explorer 4.0

Notes in IE 4.0+:

• This property works with ordered lists and unordered lists
• This property does not work with definition lists
• This property does not work with elements with "display" property set to "list-item"
• Unordered lists have a default "list-style-type" value of "disc"
• Ordered lists have a default "list-style-type" value of "decimal"

P { cursor : url("mything.cur"), url("second.csr"), text; }

Example:

Source code:

<p>Move the mouse over the words to see the cursor change.</p>
<span style="cursor: auto">Auto</span><br>
<span style="cursor: crosshair">Crosshair</span><br>
<span style="cursor: default">Default</span><br>
<span style="cursor: pointer">Pointer</span><br>
<span style="cursor: move">Move</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: text">Text</span><br>
<span style="cursor: wait">Wait</span><br>
<span style="cursor: help">Help</span><br>

Output:

Move the mouse over the words to see the cursor change.

static | relative | absolute | fixed | inherit

static : The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply. The element is placed in a normal position (according to the normal flow). With the value of "static" we do not use the "left" and "top" properties. Netscape 4.0, Internet Explorer 4.0.

relative : The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. Moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position. Netscape 4.0, Internet Explorer 4.0.

absolute : The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins. With a value of "absolute" the element can be placed anywhere on a page. The element's position is specified with the "left", "top", "right", and "bottom" properties. Netscape 4.0, Internet Explorer 4.0.

fixed : The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in:

Example(s):

@media screen {
H1#first { position: fixed }
}
@media print {
H1#first { position: static }
}

Netscape 4.0, Internet Explorer 4.0

Notes in IE 4.0+:

• Absolute positioning does not work with inline elements, lists, and table cells
• If Absolute positioning is used you must specify the "top" and "left" properties
• Relative positioning does not work with table cells

Notes in IE 5.0: Absolute positioning works with inline elements, lists, and table cells

Notes in Netscape 4.0+:

• Relative positioning does not work with list items, form fields, hyperlinks, images, table, or table cells
• Absolute positioning does not work with list items, hyperlinks, or form fields
• If Absolute positioning is used you must specify the "top" and "left" properties

h1
{
position:absolute;
left:100;
top:150
}

Example: position: relative

Source code:

<p>This is a normal paragraph position</p>
<p style="position: relative; left: 50">This paragraph has
position: relative and left: 50 pixels.</p>
<p>This is a normal paragraph position</p>
<p style="position: relative; left: -50">This paragraph has
position: relative and left: -50 pixels.</p>
<p>This is a normal paragraph position</p>
<p style="position: relative; right: 50">This paragraph has
position: relative and right: 50 pixels.</p>
<p>This is a normal paragraph position</p>
<p style="position: relative; right: -50">This paragraph has
position: relative and right: -50 pixels.</p>
<p>This is a normal paragraph position</p>

Output:

This is a normal paragraph position

This paragraph has position: relative and left: 50 pixels.

This is a normal paragraph position

This paragraph has position: relative and left: -50 pixels.

This is a normal paragraph position

This paragraph has position: relative and right: 50 pixels.

This is a normal paragraph position

This paragraph has position: relative and right: -50 pixels.

This is a normal paragraph position

Example: position: absolute

Source code:

<html>
<head>
<title>CSS2 Position : Absolute Property Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<h2>CSS2 Position : Absolute Property Example:</h2>
<hr>
<h3 style="position: absolute; top: 250; left: 50">Heading 3 with position : absolute; left : 50; top : 250</h3>
<p>With abosulte position, an element can placed anywhere on a page.</p>
<p>The LEFT position of the heading is 50 pixels from the left of the page.<br>
The TOP position is 250 pixels from the top of the page.<br>
</p>
</body>
</html>

Output:

Click here to see the output of the above example.

visible | hidden | collapse | inherit

visible : The generated box is visible. Netscape 6.0, Internet Explorer 4.0

hidden : The generated box is invisible (fully transparent), but still affects layout. Netscape 6.0, Internet Explorer 4.0

collaspse : When used in table elements, this value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as "hidden". Please consult the section on dynamic row and column effects in tables. If used on elements other than rows or columns, 'collapse' has the same meaning as 'hidden'. Netscape 6.0 only.

Notes in IE 4.0+:

• Absolute positioning does not work with inline elements, lists, and table cells
• If Absolute positioning is used you must specify the "top" and "left" properties
• Relative positioning does not work with table cells

Notes in IE 5.0: Absolute positioning works with inline elements, lists, and table cells

Notes in Netscape 4.0+:

• Relative positioning does not work with list items, form fields, hyperlinks, images, table, or table cells
• Absolute positioning does not work with list items, hyperlinks, or form fields
• If Absolute positioning is used you must specify the "top" and "left" properties

p
{
visibility: visible
}

Example:

Source code:

<p>This is a normal paragraph.</p>
<p style="visibility: visible">This paragraph has visibility: visible.</p>
<p style="visibility: hidden">This paragraph has visibility: hidden.</p>
<p>This is a normal paragraph. Note: The visibility: hidden paragraph takes space.</p>
<p style="display: none">This paragraph has display: none.</p>
<p>This is a normal paragraph. Note: The display: none paragraph does not take space.</p>

Output:

This is a normal paragraph.

This paragraph has visibility: visible.

This paragraph has visibility: hidden.

This is a normal paragraph. Note: The visibility: hidden paragraph takes space.

This paragraph has display: none.

This is a normal paragraph. Note: The display: none paragraph does not take space.

Example:

Source code:

<html>
<head>
<title>CSS2 Visibility Property Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type="text/css">
<!--
    #container1 { position: absolute;
                         top: 2in; left: 2in; width: 2in;
                         visibility: visible; }
   #container2 { position: absolute;
                         top: 2in; left: 2in; width: 2in;
                         visibility: hidden; }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function show(container) {
    if (container == "container1") {
        document.getElementById("container2").style.visibility = "hidden";
        document.getElementById("container1").style.visibility = "visible";
    }
    else {
        document.getElementById("container1").style.visibility = "hidden";
        document.getElementById("container2").style.visibility = "visible";
    }
}
//-->
</SCRIPT>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<h2>CSS2 Visibility Property Example </h2>
<hr>
<P>Choose a picture:</P>
<DIV id="container1">
    <IMG alt="image/bgpans.gif"
        width="100" height="100"
        src="image/bgpans.gif">
    <P>Picture: image/bgpans.gif</P>
</DIV>

<DIV id="container2">
    <IMG alt="image/GoldPetals.jpg"
        width="100" height="100"
        src="image/GoldPetals.jpg">
    <P>Picture: image/GoldPetals.jpg</P>
</DIV>

<FORM method="post">
    <INPUT name="bgpans" type="button"
                   value="bgpans"
                   onclick='show("container1")'>
    <INPUT name="GoldPetals" type="button"
                  value="GoldPetals"
                  onclick='show("container2")'>
</FORM>

<p>&nbsp;</p>
</body>
</html>

Output:

Click here to see the output of the above example.