<span style="color: #21584b;"><p>Text</p></span>
That's an example of some code I have in my website. The colour is a dark green and it displays normally on my PC as well as on my Android phone. But, when viewed on an iPhone or an iMac the text is within the <p> tag appears white. I don't have any CSS in the stylesheet targeting just a <p> or a <span>. All of the CSS in the stylesheet has an additional class or an id.
I've removed the <span> tags wrapping the <p> one, but I have no way of testing it since I don't own any Apple devices myself.
So, the question is, will elements inherit inline CSS, like I've put here if they don't have any classes or ids overriding them?
Do it the other way round (span inside p), that's valid HTML and will overrule any previous properties for p:
<p><span style="color: #21584b;">Text</span></p>