Cascading Style Sheets (CSS) – Understanding Inheritance, Cascading, Priorities styles

Funny business yoga

Applying Cascading Style Sheets (CSS) to HTML documents based on the principles of inheritance and cascading. The principle of inheritance is that the properties of CSS, declared for the ancestor elements are inherited by the descendants of the elements.

But, not all Cascading Style Sheets properties are inherited – for example, if a paragraph p tag comes with a CSS given frame, it will not be inherited by any tag.

But if p section has CSS font color (eg , color: green ;), then the property will be inherited by each element, tag, located in a paragraph.

The principle of cascading is used in cases when some HTML element at the same time there is assigned more than one CSS rule, that is, when there is a conflict of values of these rules. To resolve such conflicts, priority rules are introduced.

The lowest priority is given to style in your browser ;
The next in importance is the style specified by the user in the browser ‘s configuration ;
And the highest priority is the style specified by the author directly to a web page.

Additionally, style priorities are arranged as follows:

Styles that are inherited in a document element from its ancestors have the lowest priority;
Styles set in the external style sheet attached to the document have high priority;

Conflicts between them are resolved by calculating the specificity of each of the selector and the application of these selectors to this element in descending order of their specificities. In the calculation of the specificity of the selector the following are taken into account:

identity number (# id) in the selector – (( 1,0,0,0 ) for each identifier declared in the selector rules CSS);
the number of attributes ([attr], [attr = “value”]) in the selector – (( 0,1,0,0 ) for each attribute declared in the selector rules CSS);

the number of classes (.class) and pseudo (:pseudoclass) in the selector – (( 0,0,1,0) for each class and announced in a pseudo- selector rules CSS);
number of tags in the selector (H1, INPUT) – ((0,0,0,1) for each ad tag in the selector rules CSS).

Even higher priority styles that are declared directly in the tag of the element through the style attribute of this tag;

Finally, the highest priority styles that are declared by the author page, or the user, with the accompanying words! Important.

An example of the style sheet

It can either be placed in a separate file. Css, or a framed <style> and placed in the ” cap ” that the web page on which it operates.

p {
font-family: Garamond, serif;
}
h2 {
font-size: 110% ;
color: red;
background: white;
}
. note {
color: red;
background: yellow;
font-weight: bold;
}
p # paragraph1 {
margin: 0 ;
}
a: hover {
text-decoration: none;
}
# news p {
color: blue;
}
[type = “button”] {
background-color: green;
}

About these ads