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 clipproperty
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 displayproperty
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
Overflow Example
As you can see, with this property you can mimic an iframe. This box is set to an overflow value of “auto”. Meaning that if the contents of the element break the boundaries it should add a scrollbar.
If it we’re set to an overflow value of “scroll”, horizontal and vertical scrollbars would appear no matter what.
If it we’re set to an overflow value of “hidden”, the contents would be clipped at the boundary and no scrollbar would appear.
If it we’re set to an overflow value of “visible”, the contents would expand past the boundaries and no scrollbar would appear.
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 visibilityproperty
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
