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>

Solution

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