When I add such CSS into <style> tags:

* { display:block; }

It is never interpreted correctly. Instead, what do I see? Somehow everything inside <style> becomes the part of html body. E.g.:

* { display:block; } <p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>

This happens anywhere. For the first time, I thought this is the problem with StackSnippets. (i.e. the live demo for Stack Overflow, the one I've provided above), but then I checked with code pen. Then with jsfiddle. Then I've gone ahead and made a file on my server, giving it all contents I inserted in the snippet above.

The outcome is always the same. The CSS gets included in the html, though it is applied. (the only fix is to create a stylesheet and include it using <link> )

The most interesting thing, is, that it seem to happen only with display:* . E.g., the following works:

* { color:green; background:red; border:2px solid orange; border-radius:5px; } <p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>

But once I put in the styles of the last snippet display:* , the styles are, again, magically included in HTML.

* { color:green; background:red; border:2px solid orange; border-radius:5px; display:inline-block; } <p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>

Why does it happen?