CSS needs !important or inline style to properly display font color

I am intrigued by two things happening in CSS in Cover / Paragraph blocks.

Challenge 1) The intention is to have "white Text" in an Anchor tag
<h101><a href="https://xxx.co.uk">Online Shop</a></h101>
The following CSS seems to work correctly (including the font-size) but "color: #ffffff;" does not work with or without the !important; property"

h101 {
    display: table;
    margin: 10px auto 0px auto;
    padding: 2px 2px 2px 2px;
    font-variant-caps: all-small-caps;
    color: #ffffff !important;
    font-size: 24px;
    background-color:teal;
    opacity: 0.4;
	}

Solution is to add style="color:white;" in the anchor tag itself

Challenge 2) THe intention is to have Teal Text
<p class="pj-all-small-caps-48-white">Grass Fed | Certified Organic</p>
The CSS works with the !important property for color but not without

.pj-all-small-caps-48-white {
	display: table;
    margin: 0px auto 0px auto;
    padding: 2px 2px 2px 2px;
    font-variant-caps: all-small-caps;
    color: teal !important;
    font-size: 36px;
    background-color: #ffffff;
    opacity: 0.5;
  }

Apologies in both cases that I have a solution - but these seem like workarounds - what should I understand about CSS or GP that explains the behaviour?

1) css controls font size but not color

2) css controls font color but only with the !important property

Thank you, Paul
`