Cascading Style Sheet CSS

From a formatting behavior point of view, HTML elements can be divided into 2 categories:

► Block Element - Formatted as a rectangular block occupying the entire width of the parent content box. For example, <P> is block element.

► Inline Element - Formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. For example, <IMG> is an inline element.

An HTML document is divided into HTML elements. Each element is considered as a formatting unit using a box-oriented formatting model, which has:

► Content Box - A rectangular area for displaying the element content.

► Padding Box - A rectangular area surrounding the content box acting as padding space.

► Border Box - A rectangular area surrounding the padding box acting as border lines.

► Margin Box - A rectangular area surrounding the border box acting as margin space.

A floating element is a block element or in-line element being specified with the "float" style property. If "float: left" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.

If "float: right" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.

Below is a good example of a floating block element and a floating inline element:

If you want to control the size of the content box of a block element, you can use the "width" and "height" properties as shown below:

* {width: 300px} - Specifies the content box to be 300px wide.

* {height: 200px} - Specifies the content box to be 200px high.

The HTML and CSS document below shows you a good example of how to specify content box size of on a <P> tag: