Home » Html » Why is style *{display:*} included in the HTML body?

Why is style *{display:*} included in the HTML body?

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

It’s styling the <head> element and everything in it, including the very <style> element your CSS resides in, because the CSS appears as character data within the <style> element. A <link> element on the other hand doesn’t have any content — it points to a separate resource altogether, so there is nothing inside the element itself to be displayed.

Most browsers implement <head> as display: none (and some propagate that value to every descendant), which you are able to override by targeting them with a display style. The rest of the properties are still applied to <head> and its descendants regardless of whether you do this, but without it, they simply won’t show up in your page so you don’t really see it happening. That’s really all there is to it — there isn’t anything else that’s special about <head> or its related elements.

In other words, as far as CSS is concerned, the following (yes, a <style> element with a style attribute…):

<style style="display: block; font-family: monospace">
p { color: red; }
</style>

Is no different from this:

<code style="display: block; font-family: monospace">
p { color: red; }
</code>