Chapter 16: CSS Classification

Inherited: No

Clear
You can control if an element allows floated elements to its sides with the clear property

clear: value;

Values:

none
both
left
right

Now, what does all that mean?

None
This is the default setting, floated elements can appear on either side of the element set to clear: none;

Both
Setting the value to both, causes no floated elements to appear on either side of the element set to clear: both;

Left
Setting the value to left, causes no floated elements to appear to the left side of the element set to clear: left;

Right
Setting the value to right, causes no floated elements to appear to the right side of the element set to clear: right;

---

Clip
You can control how much of an element is visible with the clip property

clip: value;

Values:

auto
shape

Currently the only shape recognized by the clip property is rect (rectangle)

clip: rect(10px, 10px, 10px, 10px);

---

Cursor
You can control the style of cursor to be used in an element with the cursor property

cursor: value;

Values:

auto
crosshair
default
help
move
pointer
text
url
wait
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize

If you choose to use a custom cursor, it is always a good idea to declare a generic one after the custom value.

cursor: url("image.cur"), default;

---

Display
You can control how an element is displayed with the display property

display: value;

Values:

block
inline
list-item
none

Now, what does all that mean?

Block
Creates a line break before and after the element

Inline
No line break is created

List Item
Creates a line break before and after the element and adds a list item marker

None
Makes an element not display on the page

---

Float
The float property changes how text and or images within an element are displayed

float: value;

Values:

left
right
none

Now, what does all that mean?

Left
The image/text is displayed to the left of the parent element

Right
The image/text is displayed to the right of the parent element

None
There is no change in the way the image/text is displayed

---

Overflow
You can control what an elements contents will do if it overflows it boundaries with the overflow property

overflow: value;

Values:

auto
hidden
visible
scroll



Here is what I have in my CSS file.

#overflow_box {width:200px; height:200px; border-top: 1px solid
#eee; border-left: 1px solid #eee; border-bottom: 1px solid
#eee; padding: 10px; overflow: auto;}

Then in the (X)HTML file I have this:

<div id="overflow_box">Contents</div>

---

Visibility
You can control if an element is visible or not with the visibility property

visibility: value;

Values:

hidden
visible

---

Z-Index
You can control the layer order of positioned elements with the z-index property

z-index: value;

Values:

auto
number

The higher the number the higher the level. Negative numbers are allowed.