Classification of elements and XHTML tags in CSS

**Botan** · 23-12-2010

An understanding on what is done with style sheets is a necessary step, since the things which will be discussed, especially with the advent of visual editors and abuse are often overlooked or misunderstood by most. If I pass the metaphor, we can say that we like a good surgeon who first learn the tools must be familiar with the human body to operate successfully and without damage. We will begin with classifying the items.

Block elements and inline elements (inline-block)

We can start thinking about a page (X) HTML, as a set of rectangles on the screen. No matter whether you are paragraphs, headings, tables or images: they're all rectangular boxes. Just imagine that not all boxes are equal. Some contain other boxes in them, others are contained within the former. Some, if they are (as) in the middle of the text, leaving it to flow around them without interrupting the flow and no newline. This simple consideration already gives us the representation of the fundamental distinction between block elements and inline elements. The block elements are boxes that can contain other elements, both of which block-type inline. When a block element is inserted into the document automatically creates a new line in the document flow. We can verify this by entering into a page (X) HTML these two lines of code:

Code:

<h1> Title </ h1>
 <p> Paragraph </ p>

The words "title" and "paragraph" appear on two different lines, because <h1> and <p> are block elements. Inline elements can not contain block elements, but only other inline elements (including, of course, their own content, primarily text). In the picture are the rectangles with a green border. As you can see, when inserted in the document does not give rise to a new line. A third category is that the elements list. It includes, in practice, only the element li (list item).

**Botan** · 23-12-2010

Replaced elements (elements Replaced)

Another distinction to remember is that between non-replaced elements and replaced elements. The first are the items in a user agent (the "engine" and the mind of a browser) knows only the intrinsic dimensions. That is, those whose height and width are defined by the element itself and not by what surrounds it. The most characteristic element is replaced <img> (image tag). Other elements are replaced: <input>, <textarea>, <select> and <object> . All other elements are generally considered not replaced. The distinction is important because some properties are different for the treatment of one or the other category, while other support is only the first but not the second.

Tree of a document

Another fundamental concept is to assimilate and profit from the tree of a document. The basic mechanism of CSS is in fact the inheritance. It means that many properties that are set for an item automatically be inherited by his descendants. Knowing how to unravel in the tree well means mastering the mechanism and harness the power of language. Presenting a snippet of HTML code:

Code:

<html>
   <head>
     <title> Document Structure </ title>
   </ Head>
   <body>
     <h1> Title </ h1>
     <div>
       <p> <a href="page.htm"> First paragraph </ a> </ p>
     </ Div>
     According <p> <b> paragraph </ b> </ p>
   </ Body>
 </ Html>

**Botan** · 23-12-2010

This is its structural representation of the model tree:

The document is a perfect form of hierarchical ordering in which all elements have between them a relation of parent-child (parent-child in languages such as DOM or JavaScript is referred to the orders of their hierarchy with these terms). Each element is a parent and / or child of another. An element is the parent (parent) if it contains other elements. It says son (child) when he is enclosed in another element. Based on these simple guidelines we can analyze our document. For example <body> is the son of <html> , but it is also the parent of <h1> , <div> and <p> . The latter in turn is the parent of an element <b>. One might conclude that <body> is somehow parent <b> . Not exactly. We now introduce another distinction, also borrowed from the language of family trees, including one ancestor (ancestor pickup pattern) and descending. The parent-child relationship is valid only between one element and the other you go down a level. Just like a family tree indicating the relationship between father and son. Therefore we can say that <head> is the son of <html> that <a> is the son of <p> , etc.. Among <div> and <a> , instead you go down two levels: we say then that <div> is an ancestor of <a> and that this is a descendant from the first. There is only one element that encloses all and is not enclosed: <html> . Continuing with the metaphor we could say that family is the parent, but in technical terms we say that it is the root element. It is important to sweep the field from a possible misunderstanding: the root element of a document (X) HTML is not <body>.