title: Materialize css loading after my styles
body: <p>My HTML code is like -</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
          &lt;!--Let browser know website is optimized for mobile--&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
  
          &lt;!--Import Google Icon Font--&gt;
          &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
          &lt;!--Import materialize.css--&gt;       
      &lt;link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css"  media="screen,projection" /&gt;
  
          &lt;link type="text/css" rel="stylesheet" href="css/style.css" media="screen,projection" /&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="container"&gt;&lt;/div&gt;
  
          &lt;!--Import jQuery before materialize.js--&gt;
          &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="node_modules/materialize-css/dist/js/materialize.min.js"&gt;&lt;/script&gt;      
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>As you can see my <code>href="css/style.css"</code> is after the <code>href="node_modules/materialize-css/dist/css/materialize.min.css"</code> but in browser materialize css is overriding my <code>style.css</code> Let me know what I am doing wrong here.</p>
  
  <p>I applied <code>btn_apply</code> class on an anchor tag but somehow materialize classes/css are getting the priorities every time. Let me know how I can fix this.</p>
  
  <p><a href="https://i.stack.imgur.com/Y4AKh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y4AKh.png" alt="image"></a></p>