The CSS classification properties allow you to specify how and where to display an element.

CSS Classification Properties

The CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.

How to display an element as an inline element?

<!-- created by phpguru.biz -->
p {display: inline}
div {display: none}

<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
<div>And this div section is not displayed!</div>

<!-- created by phpguru.biz -->

An image float to the right in a paragraph :

<!-- created by phpguru.biz -->
img
{
float:right
}
<!-- created by phpguru.biz -->

Create a horizontal menu :

<!-- created by phpguru.biz -->
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
<!-- created by phpguru.biz -->

Create a homepage with a header, footer, left content and main content :

<!-- created by phpguru.biz -->
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:130%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
<!-- created by phpguru.biz -->

How to make an element invisible :

<!-- created by phpguru.biz -->

h1.visible {visibility:visible}
h1.invisible {visibility:hidden}

<!-- created by phpguru.biz -->

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

PHPGURU: The number in the "PHPGURU" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Examples

How to display an element as an inline element
This example demonstrates how to display an element as an inline element.

How to display an element as a block element
This example demonstrates how to display an element as a block element.

A simple use of the float property
Let an image float to the right in a paragraph.

An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the image.

An image with a caption that floats to the right
Let an image with a caption float to the right.

Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.

Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.

Creating a homepage without tables
Use float to create a homepage with a header, footer, left content and main content.

Position:relative
This example demonstrates how to position an element relative to its normal position.

Position:absolute
This example demonstrates how to position an element using an absolute value.

How to make an element invisible
This example demonstrates how to make an element invisible. Do you want the element to show or not?

How to make a table element collapse
This example demonstrates how to make a table element collapse.

Change the cursor
This example demonstrates how to change the cursor.

Clear the sides of an element
This example demonstrates how clear the sides of other floating elements.

---