CODEWITHSUNDEEP
htmlcssinline-styles
Tarik Druskic
Tarik Druskic

Reputation: 77

Is inline CSS inherited?

<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?

Upvotes: 1

Views: 2588

Answers (2)

Johannes
Johannes

Reputation: 67778

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>

Upvotes: 2

Quentin
Quentin

Reputation: 944076

Yes. If the value of a property is inherit then it will copy the value from the parent element regardless of how it was applied to the parent element.

That said, a <p> may not be a child element of a <span> element. The differences you are experiencing are likely due to different browsers recovering from your invalid HTML in different ways.

Upvotes: 2

Related Questions