Box model and CSS inheritance

"Cascading" means that if two equal properties but with different value are both assigned to an element, only the last one will be considerated.

Examples
1) p { color: green; } p { color: red; }
2) p { color: black; color: red;}

Both in the the first and second case, the second rule will overwrite the first one so text will be in red colour.
Another important CSSs characteristic is inheritance. We know that the structure of an HTML page is in a tree way, so, an appropriate property assigned to a tree node extends to all the other nodes children.

Example
XHTML code: <div id="content"><h1>Lorem ipsum dolor sit amet</h1></div>
CSS rules: div#content { font-size: 10px; } h1 { font-size: 120%; }

The final size of the text contained in h1 will be 12 pixels. This happens because the h1 tag is contained in the div#content in which an initial 10px value has been assigned. So, the rule calculates the final size from the property assigned to his container.
Having clarified the basic concept of inheritance, the problem arises precisely when we want to assign a graphic specificity to a single element, to a specific tag in a page, even overwriting previous graphic instructions. How to 'fight' the settings inherited from the element? Calculating, in fact, the specificity and obtaining a numerical value to assign to the rule. If several rules are involved on the same item, the higher specificity will be charged.

IDs allow you to identify uniquely any element in the page. By its very definition, a single ID can be assigned to each element. In CSS it is identified by a # character, written before the id name (#idname).

Example
XHTML code: <div id="container">content</div>
CSS rule: #container {width:960px;}

Classes allow you to assign a same style to multiple elements, even to different ones. Unlike Ids, they can then be assigned to several elements in the same page. In CSS they are identified with a dot before the class name. (.classname).

Example
XHTML code: <p class="red">Lorem ipsum dolor sit amet.</p>
CSS rule: .red {color:red;}

Another important peculiarity of the classes is the ability to assign more than one to the same element:

Example
XHTML code: <p class="red underline">Lorem ipsum dolor sit amet.</p>
CSS rule: .red {color:red;} .underline { text-decoration: underline; }

When you use combined classes within an element, if a property is used by more than one class, the classical 'cascade' method will be applied in order to establish which one is used. So, in essence, the property contained in the last included class will be assigned.

Example
XHTML code: <p class="red blue ">Lorem ipsum dolor sit amet.</p>
CSS rule: .red {color:red;} .blue { color: blue; }
The blue colour will be assigned to this section.

An example of block elements are divs, paragraphs, headings (h1, h2, etc.).. Instead, inline elements are those who are on a line within a text. For example, span or strong tags are inline elements. The management of the box model concerns the block elements. Please note that through the CSS display attribute it is possible to transform a block element into an inline one, and vice versa.

Then, the block element creates a frame in the document. The components of that frame are margins, padding and borders. as well as width and height The layout of a generic block element would be as follows:

Let's examine these attributes one at a time:

width: it is the width of the area in which is the content element.
height: it is the height of the area in which is the content element.
padding: sometimes called as 'inner margin', it is the distance of the content from the inner edge.
border: it is the element border.
margin: it is a blank around the block, preventing overlap with other elements.

If we imagine the block as a case, we see that width is represented by the size of the content, padding by the case inner package. Border is the edge of the case, while margin is the space that separates it from other cases. The width element is obtained by the sum of width plus the value of margins, padding and borders.

If in the style sheet, we set width and height to 100 pixels each (width:100px;height:100px), left and right margins to 10 px each (width:0 10px 0 10px) and padding to 5 pixels for all edges (padding:5px), the element will be a total of 130 pixels wide and 110px high.

The total width is obtained by 100px width, 20px margin (10 left and 10 right) and 10 padding (5 left, 5 right). The height will be 110 because only the 10px padding (5px top and bottom) are counted, while the top and bottom margin was set to 0.

On this count we should add a possible border too. If we assign a two pixel border to our div (border:2px), the overall height will be 114 pixels, while the width will be 134 pixels. In summary, the width of a box is calculated as follows:
left margin + left border + left padding + width + right padding + right border + right margin.

The box model is interpreted a little differently in older versions of Internet Explorer (up to version 6).