All about CSS Classification

The CSS classification properties are used for defining how an element is going to be displayed on a page. It is also used for defining how an element will show when it is within another separate element. Classification properties are also used for defining how an element is going to be positioned and for controlling the degree of visibility.

CSS Classification Properties

Here are the different CSS classification properties in use today:

  • Clear
  • Cursor
  • Display
  • Float
  • Position
  • Visibility

By knowing about all these properties, you would be able to manipulate the way that elements would appear on a page and where they would be placed. This is why classification properties are some of the most basic and at the same time some of the most important properties that you should learn in CSS.

CSS Clear Property

When images and texts appear on another element they are known as floating elements. In order to define how they would appear on that other element CSS clear property is used. This is the property that sets the area on the sides of an element where the floating elements are not allowed to appear. By default, floating elements are allowed on either side so if you want to clear the left or the right you would have to define that. Here is an example:

h2

{

clear: right

}

address

{

clear: both

}

 

CSS Cursor Property

The CSS cursor property is used for defining the kind of cursor that would show up when focusing on a particular element. You can always choose the default an arrow or you can use one of the other specified cursors. You can use a crosshair for example or a pointer. Other types of cursors that are commonly in use are text, wait and help which is often defined by a question mark. Here is an example of a code that sets the cursor property:

h2

{

cursor: crosshair

}

p

{

cursor : url("first.cur"), url("second.cur"), pointer

}

 

CSS Display Property

This CSS property is used for setting how an element is supposed to be displayed. There are many possible values that can be used for display property. Block, inline and list-item are just some of the values that can be used. In using the block value for example, the element will show as a block level. Here is an example of CSS display property using the block value:

span {display:block;}

CSS Float Property

By using the CSS float property a CSS element can be made to move around. This would allow other elements to wrap around that element. Keep in mind that elements cannot be floated vertically. You can only use this property to move the element on a horizontal manner. When you place elements that are floating one after the other, then they will move around the space that is provided. Here is an example of a code for CSS float property that you might be able to use:

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}