<link rel="stylesheet" href="https://codepen.io/web-dot-dev/pen/abpoXGZ.css" />
<link rel="stylesheet" href="https://codepen.io/web-dot-dev/pen/bGgNodr.css" />
  <div class="wrapper">
    <article class="flow">
      <h1>Cascade position order</h1>
      <figure class="callout">
          The button has a blue background, as defined by <a href="https://codepen.io/piccalilli/pen/d0b29f89bdec23929c3847ed01bd7a1d.css">this CSS</a>, which is grabbed by a <code>&lt;link /&gt;</code>.
          A CSS rule that sets it to be dark is grabbed by another <code>&lt;link /&gt;</code> and is applied because of its later position.
      <button class="button">
        My background has been set by the second link element.

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.