News & UpdatesProgrammingWeb programming Store My Projects

CSS Tutorial – 20 – Classification

CSS tutorials

The classification properties can specify how an element is displayed and whether it’s visible or not.

Display property

The display property determines the kind of box that surrounds an element. It can make any element appear as either inline, block, or any other type. The default value is different for different elements.

display : inline | block | none | list-item | run-in | 
          compact | marker | table | inline-table | 
          table-row | table-column | table-cell | 
          table-caption | table-row-group | 
          table-column-group | table-header-group | 

For example, an image is by default displayed as an inline element, meaning it can appear inline with text. With the display property this can be changed to make the image appear as a block element instead. The image will then get an invisible box expanding horizontally, as if there were line breaks before and after the element.

display: block;

Another important value is “none”, which completely hides an element along with its space.

display: none;

Visibility property

The visibility property can hide an element without removing the space it occupies by setting the property’s value to “hidden”. The “collapse” value renders the same as “hidden”, except when it’s used on table elements. It will then collapse the hidden area and make it available to other content.

visibility (block) : inherit | visible | hidden | collapse

Float property

Float detaches an element from its containing element and makes it float on top of it, either to the left or right side.

float : none | left | right

Clear property

The clear property is used to clear floating elements from the left, right, or both sides of another element.

clear (block) : none | left | right | both

Cursor property

The cursor property specifies what cursor users will see when they hover over an element. The default value is “auto”, meaning the browser will decide what cursor to use.

cursor : inherit | auto | url(<url>) | crosshair | 
         default | pointer | move | text | wait | help | 
         n-resize | w-resize | e-resize | s-resize |
         ne-resize | nw-resize | se-resize | sw-resize

A custom cursor can be specified using the CSS url function. In case this cursor isn’t available a generic cursor should be specified, separated by a comma.

cursor: url("new.cur"), pointer;
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours