Paragraph ignores style because of another nested paragraph

css, html

Solution

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

Problem

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.

Original source