Core Concepts of the Cascade

This excerpt offers a thorough overview of the CSS cascade and its importance in resolving conflicts between rules. Here's a breakdown of the key concepts covered:

• Ruleset Application: When multiple CSS rules apply to the same element, the browser uses the cascade to decide which rule to prioritize.
• Conflicting Declarations: CSS rules can target the same element using selectors of varying specificity, potentially leading to conflicts. For example:

h1 {
  font-family: serif;
}
#page-title {
  font-family: sans-serif;
}
.title {
  font-family: monospace;
}
        

In this scenario, the ID selector #page-title wins due to its higher specificity.

Criteria for Resolving Conflicts

When conflicts arise, the browser uses the following order of criteria:

1. Stylesheet Origin: Determines the source of styles:

User-Agent Styles: Default browser styles (e.g., <h1> has a large font size).

Author Styles: CSS styles defined by the developer.

User Styles: Custom user-defined styles, less common but higher precedence than user-agent styles.

2. Inline Styles: Inline styles added directly to an element via the style attribute have higher precedence.

3. Layer Priority: Newer CSS feature allowing styles to be layered with different priorities.

4. Selector Specificity: A hierarchy determines which selector takes precedence:Inline styles (style="...") > ID selectors (#id) > Class selectors (.class) > Tag selectors (h1).

5. Scope Proximity: Styles scoped closer to an element (e.g., via shadow DOM) override global styles.

6. Source Order: When selectors have equal specificity, the last declaration in the source code wins.

User-Agent Styles and Overriding Them

By default, browsers apply user-agent styles for basic page rendering. These can be overridden by author styles:

h1 {
  color: #2f4f4f; /* Override user-agent default color */
  margin-bottom: 10px; 
}
#main-nav {
  list-style: none; 
  padding-left: 0; /* Remove default padding */
}
        

Special Considerations

Order of precedence for !important:

1. Important user-agent styles
2. Important user styles
3. Important author styles
4. Normal author styles
5. Normal user styles
6. Normal user-agent styles