The document discusses CSS rules of rule conflict, including specificity, importance, cascade, and debugging Internet Explorer. Specificity refers to a mechanism that aids conflict resolution when multiple CSS rules apply to the same element. Importance can override specificity by adding "!important" to a declaration. The cascade sorts declarations by priority from lowest to highest. Debugging in Internet Explorer can be done using VirtualBox and IETester.

1. WDES105
Day 4 -- CSS Rules of Rule Conflict
about.me/babon

2. Topics
● Specificity
● Importance (point system)
● Cascade
● Debugging Internet Explorer
about.me/babon

3. Specificity
Specificity is a mechanism within the CSS
cascade that aids conflict resolution.
"When two or more declarations that apply to
the same element, and set the same property,
have the same importance and origin, the
declaration with the most specific selector will
take precedence."
about.me/babon

4. Specificity
Example:
● Four style rules that have a selector that
matches p elements.
● All four rules contain a color property
declaration.
● Which rule wins?
about.me/babon

5. Specificity
Answer:
● The most specific selector’s declaration will
take precedence.
specificity.html
about.me/babon

6. Specificity
How to measure specificity (additional info):
1. Start at 0.
2. Add 1000 for inline style attribute.
3. Add 100 for each ID.
4. Add 10 for each attribute, class or pseudo-
class.
5. Add 1 for each element name or pseudo-
element.
about.me/babon

7. Importance
An important declaration can be used to
override specificity (additional info).
Add "!important" to the end of a declaration
before the semicolon.
importance.html
about.me/babon

8. Cascade
The cascade is a set of rules for determining
which style properties get applied to an
element.
about.me/babon

9. Cascade
Declarations are sorted in the following order
(from lowest to highest priority):
user agent declarations
normal declarations in user style sheets
normal declarations in author style sheets
important declarations in author style sheets
important declarations in user style sheets
about.me/babon

10. Cascade
The declaration with the highest priority is
applied to the element.
See the cascade in effect by using firebug.
importance.html
additional info
about.me/babon

11. Debugging Internet Explorer
Access Applications > VirtualBox
Access IETester
about.me/babon