Uploaded December 2019 | Updated September 2026, 2 weeks ago
The Cascade is a central feature of CSS, and a common source of confusion. With styles coming from multiple selectors and style sheets, the cascade determines which styles take priority: overriding other styles. There are several factors in play, so we can easily get lost wondering why a style isn't being applied, where a style is coming from, or why one rule overrides another. The Firefox DevTools can help so we know what we're looking at. Miriam Suzanne will show you how the cascade is represented in the inspector, and how to get the most out of these tools – from debugging code to writing and manipulating the cascade directly in the browser.
MDN: developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
Demo page: mozdemos.netlify.com/cascade-inspect
#css #miriamsuzanne #firefoxdevtools
The Cascade is a central feature of CSS, and a common source of confusion. With styles coming from multiple selectors and style sheets, the cascade determines which styles take priority: overriding other styles. There are several factors in play, so we can easily get lost wondering why a style isn't being applied, where a style is coming from, or why one rule overrides another. The Firefox DevTools can help so we know what we're looking at. Miriam Suzanne will show you how the cascade is represented in the inspector, and how to get the most out of these tools – from debugging code to writing and manipulating the cascade directly in the browser.
MDN: developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
Demo page: mozdemos.netlify.com/cascade-inspect
#css #miriamsuzanne #firefoxdevtools
