The good thing about the present CSS is that it’s better than its previous edition especially in some added features in controlling several new properties for layout. CSS affords you greater power to manage page layout as compared to old-fashioned markups and layout tables.

Rendering of HTML documents involve parsing and rendering phase.

During the parsing phase, the browser reads the markup in the document, breaks it down into components, and builds a document object model (DOM) tree.
Consider this example HTML document:

The above HTML document can be visualized as the DOM tree in Figure 1 (in which the text nodes have been omitted for clarity).

Figure 1. The DOM tree

Objects found on the DOM tree are called nodes. We know that a number of nodes exist including text notes and element nodes. A document node (topmost contains an element node referred as root node; this is the html element in HTML and XHTML documents. This splits into two element nodes: body and head. The body and head split in several nodes.

A child node is structurally under its parent node. In HTML level, this means that the child’s tags are nested inside the tags of the parent. A node can be called a descendant node if it’s a child, grandchild, and so on, of another node. A node can be called an ancestor node if it’s a parent, grandparent, and so on, of another node. Nodes that have the same parent are called siblings. The h1 and p elements are sibling nodes.

When the DOM tree has been constructed, and any CSS style sheets have been loaded and parsed, the browser starts the rendering phase. Each node in the DOM tree will be rendered as zero or more boxes.

Just as there are block-level elements and inline elements in HTML, there are block boxes and inline boxes in CSS. In fact, there are several other box types, but they can be seen as subtypes of the block and inline boxes.

The user style sheet determines the block-level HTML elements that make block boxes. Meanwhile, in-line levels HTML make the in-line boxes.

CSS does n however, affect the markup in any way. The separation into block-level and inline elements in HTML is specified in the HTML document type definition, and cannot be changed. For example, setting the display property to block for a span element doesn’t allow us to nest an h1 element inside it, because the HTML document type definition forbids it.

The following discussion was obtained from http://reference.sitepoint.com/css/csslayout which provides reference materials for people who are into web designing and CSS.

Tags: CSS Layout and Formatting