Styles overriding problem - CSS

Readers, i am using Materialize framework (similar to bootstrap) and i was overriding the styles with !important tag which was working fine usually.
but, not working in some cases .

Then i inspected in dev tools and saw that the styles am trying to change like card title etc are getting their default styles from materialize cdn link and it already has !important tag over it. which is overriding my important.
How to get over this.

why it is getting higher priority than my important. please tell how to work around it as the colors are matching.

Put your CSS below the Materialize CSS, the document follows styles declared last. If this doesn’t work, you can add an ID to your span tag and declare

color: green !important

using the ID selector since ID has higher specificity than classes.