- Begin with Structure
- Integrating Structure and Presentation
- Application Hierarchy and Conflict Resolution
- Tying It All Together
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Application Hierarchy and Conflict Resolution
CSS offers numerous means of applying styles in a hierarchical fashion and resolving potential conflicts within style sheets. The concepts in this section are often where people have the most trouble with style sheets, especially in retrofit situations in which there is no clear document structure.
The Cascade
The cascade in style sheets is a hierarchy of application. It appears in several places—you already saw how a certain type of style sheet will override another. So, if you have an inline style for a paragraph, an embedded style for a paragraph, and a linked style for a paragraph, the inline styles take precedence over the embedded styles, which take precedence over the linked styles. Additional style information that doesn't conflict from one style sheet type to another is also applied to the selector in question.
Another area where the cascade appears is in the ordering of multiple style sheets within a document. Let's say you have three style sheets linked to your document:
<link rel="stylesheet" type="text/css" href="molly1.css" /> <link rel="stylesheet" type="text/css" href="molly2.css" /> <link rel="stylesheet" type="text/css" href="molly3.css" />
The rules of the cascade say that whichever is last in the list is the style that takes precedence. So, styles in molly3.css will take precedence over molly2.css and so on.
This is yet another area where people run into trouble because there may be conflicting style rules in a given sheet, so the cascade resolves the conflict using this application hierarchy. If you're sitting there struggling to figure out why your h2 element isn't turning blue, the reason might be because that style is in conflict with another h2 style that appears in a style sheet that takes precedence within the hierarchy.
Inheritance
As mentioned earlier, inheritance is the relationship of parent elements to child elements. In CSS, most properties are inherited, but some are not. So, if you're finding conflicts in retrofit or even ground-up CSS design, be sure to look at how the styles for a parent element might be influencing the style of its children or grandchildren. This harkens back to the earlier simple tree structure. If you have a well-structured document, finding these types of conflicts is easy and avoiding them altogether is easier still.
Specificity
Although the cascade and inheritance are commonly known aspects of CSS and you have probably have had some experience with them, one issue that is documented less but is incredibly important in CSS is specificity.
Specificity is the weight or importance of a given element and is calculated in a fairly complex way (see http://www.w3.org/TR/REC-CSS2/cascade.html#specified-value for the actual logic). If an element is higher in specificity due to these calculations, the style associated with that element is what will be applied.
A clear example of this is that elements with an id will have the highest specificity because by their very nature, ids are extremely specific—they apply to one element within the document only. Therefore, styles for an id will take precedence over other styles you attempt to apply to that element. Understanding that specificity is a part of conflict resolution in CSS means that you'll be better able to figure out why a given style might be appearing (or not appearing) within your document.