1. CSS intro
2. CSS stylesheets
3. CSS syntax
4. CSS Classes & ID's
5. CSS comments
6. CSS BG properties
7. CSS text properties
8. CSS font properties
9. CSS list properties
10. CSS border properties
11. CSS margin properties
12. CSS padding properties
13. CSS outline properties
14. CSS table properties
15. CSS dim properties
16. CSS class properties
17. CSS position properties
18. CSS pseudo classes
19. CSS pseudo elements
20. CSS shortcuts
21. CSS media types
22. CSS summary

CSS classification properties

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

This tutorial focuses on:

• Setting how an element is displayed
• Setting the visibility of elements
• 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- Element wont be displayed.
• block - Element will be displayed with a line break before and after it.
• inline - Element will be displayed with no line break before or after it.
• list-item - Element will be displayed like a list.

Output:

This text will not be displayed.

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

The first element will not be visible since the display attribute is set to "none" within it. The other three elements will appear next to each other 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.

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 - Will appear on the left side of another element.
• right - Will appear on the right side of another element.
• none - Default. Will be displayed where it occurs.

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

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

Setting a cursor

You can set what type of cursor will appear when you move the mouse over an element using the cursor property. There are many different cursors you can display.