Override Materialize CSS properties
<p>I have included <strong>first</strong> Materialize's CSS and <strong>then</strong> I have linked my css file.</p>

<p>In which I have an example class that sets <code>background-color</code> property to <code>red</code>, but that doesn't override the default color (that's set by materialize-css).</p>

<p>Here's an example:
<a href="https://jsfiddle.net/79ss2eyr/1/" rel="noreferrer">https://jsfiddle.net/79ss2eyr/1/</a></p>

<p>I'd like not to change anything in materialize's source files, instead I want to add additional classes and set my additional colors.</p>

<p>Here's what the inspector says:</p>

<p><a href="https://i.stack.imgur.com/8YozC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8YozC.png" alt="enter image description here"></a></p>

<p>How should I do that and why my css properties do not override materialize's since it's linked <strong>after</strong> the framework?</p>