Why is my HTML file not reading my CSS file?

Question

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.

Update: It's working now, I cleared browser cache and put the path for 404.html in the same directory as my .css.

Hi ! So far so good :) Is your css file on a real http server or on the local filesystem of the computer ? If live server, could you provide us a link ? — Philippe
– Philippe, Commented Oct 9, 2021 at 19:54

Shakhjakhon Komilov · Accepted Answer · 2021-10-09 19:46:42Z

1

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

answered Oct 9, 2021 at 19:46

Shakhjakhon Komilov

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Abdullah Khan · Accepted Answer · 2021-10-09 19:48:45Z

0

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

answered Oct 9, 2021 at 19:48

Abdullah Khan

1,54313 silver badges15 bronze badges

Comments

Jonathan Ayers · Accepted Answer · 2021-10-09 19:52:41Z

0

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

answered Oct 9, 2021 at 19:52

Jonathan Ayers

31 bronze badge

Comments

Kumar_Maddy · Accepted Answer · 2021-10-09 19:52:45Z

0

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.

answered Oct 9, 2021 at 19:52

Kumar_Maddy

973 silver badges12 bronze badges

Comments

Dharman · Accepted Answer · 2021-10-09 19:53:09Z

0

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.

edited Oct 9, 2021 at 19:53

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 9, 2021 at 19:47

MuhammadNafiz

11 bronze badge

1 Comment

daysant Over a year ago

i'm using an online linux-based IDE at replit.com (that would also not explain my android 11 problems) and style.css is reserved for my other pages. could you also clarify on the first part?

Red Boumghar · Accepted Answer · 2021-10-09 19:55:17Z

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! :)

InfinityLight · Accepted Answer · 2021-10-09 20:07:03Z

0

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:

answered Oct 9, 2021 at 20:07

InfinityLight

112 bronze badges

Collectives™ on Stack Overflow

Why is my HTML file not reading my CSS file?

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related