Creative Workflow Helpers
CSS Cascade Conflict Explainer
Paste the rules fighting over the same property and see which declaration wins, with a plain-English reason. Everything runs locally — your CSS never leaves the page.
Competing declarations
source CSSLeave blank to explain every property found in the CSS.
Rules are compared in the order listed. !important and
@layer are understood; use style { … } for the element’s
inline style attribute. Shorthands are matched by name, so enter the exact property.
Who wins
liveHow the cascade decides
When declarations for the same property apply to an element, the browser sorts them in this order:
1. !important beats normal declarations;
2. an inline style attribute beats stylesheet rules of the same importance;
3. cascade layers — normal styles outside a layer win, and later layers win, while
!important reverses that order;
4. the more specific selector wins;
5. otherwise, whichever comes last in the source order wins.
Conditional at-rules such as @media are compared as if they apply — the tool does not
evaluate the condition. Your CSS is parsed right here in the page and never uploaded.