Cascading Style Sheets (CSS) (page 3)

Inheritance

Inheritance is the characteristic by which elements contained by other elements inherit from its parent the characteristics that are not set for itself.

In the next example, the properties defined for the paragraph will override those defined for the body (HTML body tag). The body's properties not overridden, are inherited by the paragraph (because it's contained by the body).

In this document, the paragraph will have all the properties defined for the "p" element (font family, font size and color), but the font weight will be inherited from the body (its parent) properties.

Cascading

The hierarchy of the CSS structure is one of its most important characteristics, from where it gets the "cascading" denomination. The idea of cascading comes from the effect caused by the order in which the properties are applied to a single element from different style sources. The three possible sources are, in order of relevance: the author, the visitor and the user agent.

The implicances of this order are very small for authors, beacuase the styles they define can only be overriden explicitly by the user. But you shouldn't forget the fact that the attributes you don't specify will be set by the visitor or the user agent (and browsers' default values may vary).

The "!important" rule

The other variant that the cascading property provides is the "!important" rule. With this rule authors can change the order in which the styles are applied: normal styles are always overriden by important styles.

The "!important" rule is applied to properties at the end of their declaration (before the semicolon) and separate from the rest by a space.

In the previous example the font size is declared with the "!important" rule, therefore, any paragraph defined with normal styles will have a font size of 10px (as this declaration applies to all paragraphs).

The specificity order

The specificity order has a bigger impact in the way authors apply attributes to their documents. Unlike the cascading property, it specifies the order in which the different declarations (style attribute, id selectors, classes, etc.) take precedence.

The list below shows the specificity order used to apply CSS properties to HTML elements, from the most specific to the most global.

1. "style" attribute (e.g., <p style="...">).
2. ID selector (e.g., p#help {...}).
3. Class specific definition (e.g., p.second {...}).
4. Class global definition (e.g., *.second {...}).
5. Element definition (e.g., p {...}).
6. Global definition (e.g., * {...}).

In the following example we'll analyze the application of different style definitions to a single element.

The declarations with higher specificity level overrides the rest. In the example above, the paragraph will have an "arial, helvetica" font family and a "black" color from the properties defined for the "p" element, but will not have a "10px" font size because it will be overridden by the property defined in the "important" class that's applied to the element. Subsecuently, the element will receive from the "important" class a "12px" font size but the "bold" font weight will be overridden by the property defined in the "style" attribute.