Before going into the details of the CSS language, it is necessary to dwell on some key concepts related to HTML. These are preparatory topics for a better understanding of how CSS works. We will start with the classification of HTML elements, and then explain the configuration of the tree structure of a document.
Block elements and inline elements
We look at an HTML page trying not to think about the content but only about its structure and putting in place a sort of process of abstraction. We can be helped by a simple image:
An HTML page rendered on screen by a browser is composed, in fact, of a set of rectangles (boxes). It doesn’t matter whether it’s paragraphs, titles, tables or images: it’s always a rectangular box.
Looking carefully at the image, however, you can see that not all boxes are the same. Some contain other boxes inside them; others are contained inside the first ones. Some, if they are (as it happens) in the middle of the text, let it flow around them without interrupting its flow and without going through it. This very simple consideration gives us the representation of the fundamental distinction between block elements (those marked by the black border) and inline elements (those surrounded by the red border).
Block elements are boxes that can contain other elements, both block and inline. When a block element is inserted in the document, a new line is automatically created in the document flow. We can verify this by inserting these two lines of code in an HTML page:
<h1>Title</h1>
<p>Paragraph</p>
The words “title” and “paragraph” will appear on two different lines, because <h1> and <p> are block elements.
Inline elements cannot contain block elements, but only other inline elements (as well as, of course, their own content, essentially text). As you can see, when they are inserted in the document they do not give rise to a new line.
Alongside these two fundamental types of elements, the CSS formatting model includes two other categories: list elements and elements connected to tables.
All HTML elements, in summary, have their own default presentation mode and correspond to the types just seen. Through the CSS we can change this mode through the display property. Thanks to the latter, just to give an example, we can make a title h1 (block element) is shown as an inline element, or make an element a (inline) is rendered as a block element. We’ll come back to these concepts later. For now, let’s introduce another important distinction between HTML elements.
Replaced and not replaced elements
Another distinction to remember is that between replaced and non-replaced elements. The first are elements of which a user agent (the engine of a browser) knows only the intrinsic dimensions. That is, those in which height and width are defined by the element itself and not by what surrounds it.
The most typical example of a replaced element is <img> (an image). Other replaced elements are: <input>, <textarea>, <select> and <object>. All other elements are generally considered not replaced.
The distinction is important because for some properties the treatment between the two categories is different, while for others the support is only for the first, but not for the second.
Tree structure of a document
Another fundamental concept to be assimilated for a correct application of CSS is that of the tree structure of a document. The fundamental mechanism of CSS is, in fact, inheritance. It causes many of the properties set for an element to be automatically inherited from its descendants. Being able to untangle in the tree structure means mastering this mechanism well and making the most of the power of language. All the concepts that we will explain below are defined in the so-called Document Object Model (DOM), the standard set by the W3C for the representation of structured documents.
We present immediately a fragment of HTML code:
<html>
<head>
<title>Document structure</title>
</head>
<body>
<h1>Title</h1>
<div>
<p>First <a href=”page.htm”>paragraph</a>.</p>
</div>
<p>According to <em>paragraph</em>.</p>
</body>
</html>
This is its structural representation according to the tree model:
Document tree structure
The document is a perfect form of ordered hierarchy in which all the elements have a parent-child relationship between them. Each element is the parent and/or child of another.
An element is called parent when it contains other elements. A child is defined as being enclosed in another element. Based on these simple indications we can analyze our document.
For example, <body> is the child of <html>, but it is also the parent of <h1>, <div> and <p>. The latter is in turn the parent of an element <em>.
It could be concluded that <body> is also somehow the parent of <em>. Not exactly. Now let’s introduce another distinction, also borrowed from the language of genealogical trees, between ancestor (ingl: ancestor) and descendant (ingl: descandant).
The parent-child relationship is only valid if there is a drop in level between one element and another. Just as in a family tree the relationship between father and son is indicated. Therefore, we can say that <head> is the son of <html>, that <a> is the son of <p>, etc. Between <div> and <a>, instead, we go down two levels: let’s say then that <div> is an ancestor of <a> and that this is compared to the first a descendant.
The document tree can be read not only vertically, but also horizontally. In this sense, the elements that are placed on the same level, that is those that have the same parent, are called brothers (ingl: siblings). In our example, h1, div and p are brothers with respect to the body element.
Finally, there is only one element that encloses everyone and is not enclosed: <html>. Continuing with the familiar metaphor we could say that it is the founder, but in technical terms it is said that it is the root element.