Search code examples
htmlcssmaterialize

Override Materialize CSS properties

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:

enter image description here

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

Solution

  • 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;
}