CSS cascade, live

Browser as a runtime · part 1 of 6. Next: Stacking contexts.

Later origins beat earlier ones. Inline beats author rules. !important on an author class beats inline. The cascade picks the winning declaration. It does not pick who paints on top — that is part 2.

Live demo

Paragraph starts with inline teal. Stylesheet says navy. Click the button to add .loud (color: crimson !important).

Inline vs author vs !important

Demo file: public/demos/css-cascade/index.html. Same-origin iframe. No build step.

CodePen or StackBlitz

Use a public embed when the demo needs a full sandbox. Swap the src for your pen or project.

CodePen:

<iframe
  height="300"
  style="width: 100%"
  title="CodePen embed"
  src="https://codepen.io/team/codepen/embed/preview/PNaGbj?default-tab=result"
  loading="lazy"
  allowfullscreen
></iframe>

StackBlitz:

<iframe
  height="400"
  style="width: 100%"
  title="StackBlitz embed"
  src="https://stackblitz.com/edit/vitejs-vite?embed=1&file=index.html"
  loading="lazy"
  allowfullscreen
></iframe>

Prefer in-repo HTML under public/demos/ when the example is small.