Why is my HTML file not reading my CSS file?-CodePudding

I'm creating a website.
My .html file is not linking to my .css file.

HTML:

<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="404.css">
  <title>Pacebi - 404</title>
</head>
<body>
body text here
</body>
</html>

CSS:

body{
  font-family:'Montserrat';
  background-color:whitesmoke;
  color:black;
}
button{
  font-family:'Montserrat';
  background-color:whitesmoke;
  color:black;
}

Note that I've done the exact same thing to my other pages. This is specifically not working.
Could it be the fact this is a 404 page in any way?

Using an online web programming tool (replit.com). (OS would not affect. If it did, I've been editing from a Windows 10 and Android 11.)

CodePudding user response：

i think your linked it wrong, well that is the only reason why it would not be connected

CodePudding user response：

Your code is correct. It's working fine on my side.

CodePudding user response：

Yes. I'd change the name to something still relevant and see if the issue persists.

CodePudding user response：

I checked with your code. It was working fine on my side. Could be a cache issue. Empty your browser cache and refresh it. It should work fine then.

CodePudding user response：

It is not linking because your css body code should be the html file code and if that doesn't work I think your file name should be style.css cuz 404 is a interactive code for windows to follow your file path.

CodePudding user response：

It does not matter if your file is named 404.css or 503.css, it has to be in the same folder as your html file in your case.

That said, it seems your CSS is ill-formed or badly copy/pasted. You miss the tag name for which you are defining the first styles. i guess it's the body

MISSING_SELECTOR {
  font-family:'Montserrat';
  background-color:whitesmoke;
  color:black;
}
button{
  font-family:'Montserrat';
  background-color:whitesmoke;
  color:black;
}

Also you can add the type but that does not matter much:

<link rel="stylesheet" type="text/css" href="404.css" />

Browsers HTML parsers are quite robust to the fact they don't really need the HEAD and BODY tags in order to know where to place the objects. Nevertheless try to put all your links and metas inside the head if you are using it.

Good luck! :)

CodePudding user response：

I tried the code on replit.com and it worked fine for me:

The only reasons why I think it might not have worked on your computer is if you named the file incorrectly, or if you put the css in a different folder.

Suppose you did it like this, then it would not work because the file path would be incorrect:

The second reason is if you put the css in a different folder, so the file path would be wrong: