Inheritance, Cascade, conflicts between styles

[Xiomar]

We're going to get into the heart of the mechanism of how CSS works. These rules are a bit complex, but basic. So maximum attention. The examples that accompany the theoretical part will help in the learning process: use them forever.

Inheritance

The first concept is that of inheritance. According to this mechanism the style settings applied to an element also fall on its descendants. At least until, by a descendant element, you do not explicitly set a different value for that property. If we set the color red for text ( color: red; ) at all other elements of the BODY element's descendants will inherit this setting. But if at some defined point in the code of the CSS selector with the property color: black; inheritance is broken. Not all properties are inherited, and we will make explicit in the analysis of each of them. They are generally those associated with the formatting of the box model: margins, borders, padding, background, the most important. The reason is simple. Inheriting a border is simply nonsense. It imposed a, say, a paragraph would be absurd for an item or <A> bold text are surrounded by the same board. So far so simple. Now go into detail. Inheritance is not sufficient to explain the many possible relationships between the rules of CSS.

[Xiomar]

Weight and origin

From here on out will face another set of basic concepts, however, all traceable to the same area: the possible conflicts between the styles and rules. We will try in practice to answer questions like this. If I define these rules in a CSS:

p {color: black;} 
.Text {color: red;}

And in an HTML page, write this code:

<p class="text"> paragraph </ p>

Because the text of the paragraph will be red and not black? Because the class selector overrides the simple element. The first concept to learn is by weight. Refers to a greater or lesser importance to be assigned to each rule. A first important criterion is given by 'origin of the style sheet. When you view a page (X) HTML can play a part in changing the style of three different elements of style sheets:

• sheet author
• User Sheet
• worksheet's default browser

In order of importance, we have: the author's paper, spreadsheet user, the browser default sheet. All the latest navigation software can manage this aspect. E 'can, for example, make the browser ignore the CSS defined by the author of the pages and format them with CSS made by the user. And yet, as we shall see, you can change this hierarchy by using the keyword! Important - Basically, however, the order shall be as defined above.

[Xiomar]

Specificity

The specificity, as the name might suggest, describes the relative importance of different rules within a style sheet. There are strict rules to calculate and apply are those that the user agent when a browser is in front of a CSS. The calculation of the three factors and each of them represents the value of a triplet. First we count the number of ID selectors in the rule. The next step is to verify the presence of classes and pseudo-classes. Finally, we count the number of elements defined in the rule. Never as in this case is urgent example. First rule:

# Title {color: black;}

Calculation: an ID, Class 0, 0 items. triplet of values: 1-0-0

.Class1 {background: # C00;}

ID 0, Class 1, 0 items. triplet: 0-1-0

h1 {color: red;}

ID 0, Class 0, an element. triplet: 0-0-1. The specific weight of the first rule is the greater. That the last child. In practice, outweigh the ID classes that weigh more than the individual elements. Do not make the mistake to evaluate the largest number regardless of its location. This rule has the following specific 1-0-0:

# Section {color: green;}

and it is more important than this which has the following values 0-0-2:

div p {color: red;}