CSS error: at-rule or selector expected, { expected-CodePudding

I'm trying to run this code on Visual Studio Code and faced these errors:

at-rule or selector expected at Ln1 Col1, Ln7 Col 1, Ln50 Col1

{ expected at Ln2 Col1, Ln51 Col 1

I tried to run these on W3Schools and they ran just fine. How can I solve this issue? Here's the code, thank you!

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: white;
}

/* Text Display */

h1 {
    font-family: georgia, "Times New Roman", Times, serif;
    color: black; /* Set text color to black */
    text-align: center;
}

#p1 {
    font-family: Arial, Helvetica, sans-serif;
    color: blue; /* Set text color to blue */
    text-align: center;  
}

.center {
    font-family: Arial, Helvetica, sans-serif;
    color: green; /* Set text color to green */
    text-align: center;
}

/* unvisited link */
a:link {
    color: blueviolet;
  }
  
  /* visited link */
  a:visited {
    color: gray;
  }
  
  /* mouse over link */
  a:hover {
    color: blue;
    font-weight: bold;
  }
  
  /* selected link */
  a:active {
    color: blue;
  }

</style>
</head>
<body>

<h1>Welcome!</h1>
<h2 id="p1">Enjoy numerous movie reviews and recommendations here.</h2>
<h3 >Featured movie of the week:</h3>
<p><b><a href="default.asp" target="_blank">Everything Everywhere All at Once</a></b></p>


</body>
</html>

CodePudding user response：

In Visual Studio Code bottom right, change Language Mode to HTML from CSS.

CodePudding user response：

Sometimes your editor could have extra characters accidently placed somewhere

To see those you can refer this whitespace

Otherwise copy your entire code a normal notepad in windows and paste it back to VS Code

Or you can use Notepad and see all characters and then delete them

Otherwise copy paste you code piece by piece one style at a time, you can narrow the issue