Paragraph ignores style because of another nested paragraph

Question

Probably my CSS knowledge is limited, but I don't uderstand this:

<p style="color: green">
    <p style="color: red">This is red</p>
    This should be green. But it's not.
</p>

The second line will render in black ignoring the "color:green". Why? I tested it in Chrome 28 and Firefox 22.

Answer 1

You can't nest paragraphs.

Paragraph is an auto-closing element, the </p> is optional - any block element will automatically close the last open <p>.

This is what's happening:

<p style="color: green">
</p> <!-- auto-closed paragraph -->

<p style="color: red">
    This is red
</p>

This should be green. But it's not.

</p> <!-- here you have syntax error -->