title: overriding css styles with @import not working
body: <p>I'v seen some similar questions about overriding styles with @import, people suggest to put @import at the bottom, but that does not seem to work here.</p>
  
  <pre><code>--- index.html ---
  &lt;head&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  This text should be green.
  &lt;/body&gt;
  
  --- style.css ---
  body {color: red;}
  @import url('style-override.css');
  
  --- style-override.css ---
  body {color: green;}
  </code></pre>
  
  <p>The example above will output <strong>red</strong> text, while <strong>green</strong> is expected.</p>
  
  <ul>
  <li><p>Declaring style-override.css after style.css inside head will solve the problem, but I want to use @import <strong>inside</strong> a css file.</p></li>
  <li><p>Adding <strong>!important</strong> in style-override.css will also get the expected result, but that is not the way it should work.</p></li>
  </ul>
  
  <p>Can anyone explain this?</p>