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

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