CSS
  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

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

Possible values for the display property:

Example:
<p style="display: none;">This text will not be displayed.</p> <img src="apple.jpg" alt="Apple" style="display: inline;" /> <img src="sky.jpg" alt="Sky" style="display: inline;" /> <p 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". </p>
Output:

This text will not be displayed.

Apple Sky 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.

Example:
<p style="visibility: hidden;">This text is not visible.</p> <p style="visibility: visible;">This text is visible.</p>
Output:
This text is 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:

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="/images/apple.jpg" alt="Apple" /> <p>There are many fruits out there...........</p> <img class="two" src="/imagesapple.jpg" alt="Apple" /> <p>There are many fruits out there.........</p> </body> </html>
Output:
Apple

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

Apple

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.

Example:
<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>
Output:

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.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information