Override Materialize CSS properties

Question

I have included first Materialize's CSS and then I have linked my css file.

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

Here's an example: https://jsfiddle.net/79ss2eyr/1/

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

Here's what the inspector says:

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

Answer 1

Inn Materialize's the rule is set by footer.page-footer {}, but you're wrote just .app-bg. So you can't override the Materialize's rule.

If u want to override that class you can use footer.app-bg or use !important:

footer.app-bg {
  background-color: red;
}

or

.app-bg {
  background-color: red !important;
}

Answer 2

Make the css selector more specific, like this:

footer.app-bg {
  background-color: red;
}

Answer 3

If your css is not applying to the element because of other applied css just use !important to specify that your css is important.

.app-bg {
  background-color: red !important;
}

Example : https://jsfiddle.net/79ss2eyr/2/