CODEWITHSUNDEEP
htmlhead
Max888
Max888

Reputation: 3780

HTML head being rendered as text

I have the below HTML. For some reason the page is being rendered with the head as text like:

Document
* { display: block; width: 300px; } textarea { height: 300px; }
My Form

I've been searching for an explanation and think it could be because there is an error in the code in the head tag, so the never gets called and it is treated as part of the body, but I can't see any problem with it and VSCode doesn't show any errors.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        display: block;
        width: 300px;
      }
      textarea {
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h1>My Form</h1>
    <form></form>
  </body>
</html>

Upvotes: 3

Views: 61

Answers (2)

Bright
Bright

Reputation: 73

I run your code on my system and the header is coming out bold just like it should... maybe you have to clear your browser cookies or try to open the code on an incognito window

....... then for the

Document

  • { display: block; width: 300px; } textarea { height: 300px; }

that is showing, i guess its an error so i removed the "*" and everything works fine... the working code is below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      {
        display: block;
        width: 300px;
      }
      textarea {
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h1>My Form</h1>
    <form></form>
  </body>
</html>

Upvotes: 1

Abdullah Al Reza Rohan
Abdullah Al Reza Rohan

Reputation: 66

You can't use display, width and some more properties in "* (universal selector)". Replace * with body selector, it will work :)

Upvotes: 5

Related Questions