title: why css variables override another file's css variable?
body: <p>When I define a variable in various CSS files, and include these files in my HTML file, then it overrides the previous variable.
  Why is it happening?</p>
  
  <p><em>Let's say that I have</em></p>
  
  <p><strong>test1.css</strong></p>
  
  <pre><code>:root {
      --size-of-font: 5rem;
   }
  .logo{
      font-size: var(--size-of-font);
  }
  </code></pre>
  
  <p><strong>test2.css</strong></p>
  
  <pre><code>:root {
  --size-of-font: 1.2rem;
  }
  .outer {
      font-size: var(--size-of-font);
      cursor: pointer;
      text-align: center;
  }
  </code></pre>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="test1.css"&gt;
    &lt;link rel="stylesheet" href="test2.css"&gt;
  
  &lt;div class="outer"&gt;
      &lt;h1 class="logo"&gt;Lorem Ipsum&lt;/h1&gt;
       &lt;p&gt;Neque porro quisquam est qui dolorem 
            ipsum quia..."&lt;br&gt;
            "There is no one who loves pain 
            itself..."
       &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>