CSS classification properties

With CSS classification properties, you can specify how and where elements are displayed.

This lesson focuses on:

Setting how an element is displayed
Setting the visibility of an element
Setting the way an element appears in another element
Setting a cursor

Setting how an element is displayed

The display of an element is set with the display property.

Possible values for the display property:

none
The element wont be displayed.
block
The element will be displayed with a line break before and after it.
inline
The element will be displayed with no line break before or after it.
list-item
The element will be displayed like a list.

Example:

<html>
<head>
<title>Setting how an element is displayed</title>
</head>
<body>
<p style="display: none;">
This text will not be displayed.
</p>

<img src="apple.jpg" alt="Apple" 
border="0" style="display: inline;" />

<img src="sky.jpg" alt="Sky" 
border="0" style="display: inline;" />

<span style="display:inline;">
There will be no line breaks between this text and the 
two images because the <b>display</b> attribute 
is set to "inline".
</span>
</body>
</html>

Output:

There will be no line breaks between this text and the two images because the display attribute is set to "inline".

In the above example, there are four elements. The first element (a paragraph) will not be visible since the display attribute is set to "none" within it. The other three elements (two images and some text) will appear without line breaks because the display attribute is set to "inline" within them.

Setting the visibility of elements

The visibility of elements is set using the visibility property. This property can take the value "visible" to set elements as visible (default), or "hidden" to set elements as invisible.

Example:

<html>
<head>
<title>Setting the visibility of elements</title>
</head>
<body>
<p style="visibility: hidden;">
This text is not visible.
</p>

<p style="visibility: visible;">
This text is visible.
</p>
</body>
</html>

Output:

This text is not visible.

This text is visible.

In the above example, there are two paragraphs. The first paragraph is set to be invisible. The second paragraph is set to be visible.

Setting the way an element appears in another element

You can specify how an element should appear in another element using the float property.

Possible values:

left
An element will appear on the left of another element.
right
An element will appear on the right of another element.
none
Default. An element will be displayed where it occurs.

Example:

<html>
<head>
<style type="text/css">
<!--
img.one {float: left;}
img.two {float: right;}
-->
</style>
<title>
Setting the way an element appears in another element
</title>
</head>
<body>
<img class="one" src="apple2.jpg" alt="Apple" border="0" />
<p>
There are many fruits out there. One particular fruit which 
is highly popular is the apple. There are green apples, 
red apples, and much more. Apples contain vitamin C and many 
other antioxidant compunds that may reduce the risk of cancer 
by preventing DNA damage. As the old saying goes, "An apple 
a day keeps the doctor away!"
</p>

<img class="two" src="apple2.jpg" alt="Apple" border="0" />
<p>
There are many fruits out there. One particular fruit which 
is highly popular is the apple. There are green apples, 
red apples, and much more. Apples contain vitamin C and many 
other antioxidant compunds that may reduce the risk of cancer 
by preventing DNA damage. As the old saying goes, "An apple 
a day keeps the doctor away!"
</p>
</body>
</html>

Output:

There are many fruits out there. One particular fruit which is highly popular is the apple. There are green apples, red apples, and much more. Apples contain vitamin C and many other antioxidant compunds that may reduce the risk of cancer by preventing DNA damage. As the old saying goes, "An apple a day keeps the doctor away!"

In the above example, there are two images and two paragraphs. In the first image/paragraph set, the image floats to the left of the paragraph. In the second image/paragraph set, the image floats to the right of the paragraph.

Setting a cursor

You can set what type of cursor will appear when you move the mouse over an element using the cursor property.

Example:

<html>
<head>
<title>
Setting a cursor
</title>
</head>
<body>
<p style="cursor: auto;">
Move the mouse over this text to see an 'auto' cursor.
</p>

<p style="cursor: crosshair;">
Move the mouse over this text to see a 'crosshair' cursor.
</p>

<p style="cursor: pointer;">
Move the mouse over this text to see a 'pointer' cursor.
</p>

<p style="cursor: move;">
Move the mouse over this text to see a 'move' cursor.
</p>

<p style="cursor: wait;">
Move the mouse over this text to see a 'wait' cursor.
</p>
</body>
</html>

Output:

Move the mouse over this text to see an 'auto' cursor.

Move the mouse over this text to see a 'crosshair' cursor.

Move the mouse over this text to see a 'pointer' cursor.

Move the mouse over this text to see a 'move' cursor.

Move the mouse over this text to see a 'wait' cursor.

In this example, there are five paragraphs. Each paragraph will change the cursor when you move the mouse over it.