2. Objectives
Students should able to:
1 Resolve potential conflicts with CSS
2 Explain the hierarchy of rules in CSS
applications
• Cascade
• Inheritance
• Specificity
3. Conflicts in CSS
It is possible to have CSS declarations in both
an external style sheet and an embedded
style sheet.
The order of the cascade specifies that
the embedded styles will override
conflicts with the external styles.
4. Conflicts in CSS
It is important to understand that only those
styles that are in direct conflict will be
overridden.
The browser will attempt to use both the
external and embedded styles together.
5. Conflicts in CSS
For example, you have the following
declaration in your external style sheet:
p{ font-family: Arial, Helvetical, sans-serif;
color: #00F; font-size: 90%; line-height: 1.4em;
}
6. Conflicts in CSS
In an embedded style sheet on a page
linked to that external sheet, you have:
p{ font-weight: bold; line-height: 1.2em; }
7. Conflicts in CSS
The resulting paragraph text on the page
would be displayed in bold, blue Arial at
90% with a line height of 1.2em.
As the embedded style sheet is silent on
the font-family, color and size, those
properties are not overridden.
8. Cascade
The cascade in style sheets is a hierarchy of
application.
Example:
If you have an inline style for a paragraph, an
embedded style for a paragraph, and a linked
style for a paragraph, which one will take
precedence over another?
9. Cascade
The inline styles take precedence over the
embedded styles, which take precedence
over the linked styles.
10. Cascade
The cascade appears is in the ordering of
multiple style sheets within a document and
there are three style sheets linked to the
document.
Example:
<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" />
11. Cascade
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.
If you're 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.
12. Inheritance
Inheritance is the relationship of parent
elements to child elements.
So, if you're finding conflicts in 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.
So, have a well-structured document.
13. Specificity
Specificity is the weight or importance of a
given element and is calculated in a fairly
complex way.
If an element is higher in specificity (due to
these calculations), the style associated with
that element is what will be applied.
14. Specificity
An 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.
