The CSS cascade resolves conflicts when more than one declaration matches the same element. Think of it as a set of layers: a later, lower declaration can overrule an earlier one. If two h1 rules in the same stylesheet set different colors, the color written lower in the code is used. section 7.2.4
A later rule wins
When these two rules appear in this order, headings become blue, not red. The earlier color declaration is ignored because the blue declaration is lower in the stylesheet. This is a useful first check when a style does not appear as expected. section 7.2.4
h1 {
color: red;
}
h1 {
color: blue;
}
Compare the two matching h1 rules: both set color, but the lower blue value overrules the red one. section 7.2.4
For a WordPress site, the cascade is presented as four levels, from highest to lowest: browser default styles, the active theme stylesheet, site administrator CSS added through Appearance > Customize > Additional CSS, and inline CSS placed in page HTML. A declaration at a lower level can overrule the same property at an earlier level. section 7.2.5 section 7.5
Use the levels for the right kind of change:
- Leave browser defaults as the starting point when no later CSS sets a property. section 7.2.5
- Use theme CSS for site-wide styling, but avoid modifying theme code files directly. section 7.2.5
- Add site-wide overrides in Appearance > Customize > Additional CSS. section 7.2.5
- Use inline CSS for a local zone such as a word, paragraph, image, or page when a targeted change is needed. section 7.2.5 section 7.5
Scope helps choose a layer. Theme and Additional CSS rules are generally global, applying across the site. Inline CSS is local: placing a style on a span, paragraph, or div can affect only that selected content. A div can group multiple elements so one inline style applies to the whole zone. section 7.2.5 section 7.5
A local color change
Add style="color: red;" to a span or paragraph when only that content should become red. For a larger callout, put a heading and paragraph inside a div with white text and a purple background, so both elements share the local styling. section 7.2.5 section 7.5
When a page looks wrong, inspect the element rather than guessing. Right-click the page and choose Inspect, then select the HTML element. In the Styles pane, a property shown with a line through it has been overruled by the same property lower in the cascade. You can live-edit styles there to test a change immediately before editing site code. section 7.3
