Is inline CSS inherited?

Question

Text

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  tag appears white. I don't have any CSS in the stylesheet targeting just a  or a . All of the CSS in the stylesheet has an additional class or an id.

I've removed the  tags wrapping the  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?

 is not a valid child of  so chances are some browsers are "correcting" your invalid HTML and the result is not what you expect. — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 26, 2018 at 12:49

Johannes · Accepted Answer · 2018-02-26 12:54:10Z

2

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>

answered Feb 26, 2018 at 12:54

Johannes

67.9k22 gold badges85 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2018-02-26 12:50:45Z

2

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  may not be a child element of a  element. The differences you are experiencing are likely due to different browsers recovering from your invalid HTML in different ways.

answered Feb 26, 2018 at 12:50

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

BoltClock Over a year ago

And it likely has to do with the surrounding markup that's not shown, too - <!DOCTYPE html><body>...</body> behaves identically in all browsers, whereas a more complex layout is likely to be less than interoperable.

Collectives™ on Stack Overflow

Is inline CSS inherited?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related