Page CSS will not load - simple html and js file

Question

I'm creating a simple page to start to learn HTML, CSS and java script. I have my HTML file with the following link to my CSS file but for some reason none of CSS loads.

I running this on localhost via node.

html:

<!DOCTYPE html>
<html>
<head>
  <link href='./css/styles.css' type='text/css' rel='stylesheet'>
</head>

my server.js file:

var http = require('http');
var fs = require('fs');

const PORT=8080;

fs.readFile('./index.html', function (err, html) {

    if (err) throw err;

    http.createServer(function(request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
        response.end();
    }).listen(PORT);
});

I also get the error

"Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/css/styles.css"."

Do I need to add another content-type for "text/css" into my server.js file?

Document tree:

you are missing an important tag. nodejs

Sagar V
– Sagar V

2017-08-06 17:23:50 +00:00
Commented Aug 6, 2017 at 17:23 — Sagar V
– Sagar V, Commented Aug 6, 2017 at 17:23
thanks for adding the tag, i did miss that one :)

Govna
– Govna

2017-08-06 17:32:46 +00:00
Commented Aug 6, 2017 at 17:32 — Govna
– Govna, Commented Aug 6, 2017 at 17:32

Murat Seker · Accepted Answer · 2017-08-06 17:17:34Z

2

You can add your scripts externally to your html page like this. It could be located inside of the head tags like your CSS definition.

<script type="text/javascript" src="../Script_folder/server.js"></script>

And be carefull about reaching files in the tree. ../ means one level up and ~/ points to root node. So, I wonder that your routing has a certain point with a single . in your CSS address.

<link href='../css/styles.css' type='text/css' rel='stylesheet'> with two dots. ../

answered Aug 6, 2017 at 17:17

Murat Seker

9142 gold badges15 silver badges27 bronze badges

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

5 Comments

Govna Over a year ago

Thanks for the response, but unfortunately it did not load my css still.

Govna Over a year ago

I do have the following sources in my index.html file at the end of the body as i want to load all the page contents first. <script src='code.jquery.com/jquery-3.1.0.min.js'></script> <script src="js/main.js"></script>

Murat Seker Over a year ago

could you please post an image of the document tree. so we can see file and folder hierarchy.

Govna Over a year ago

added document tree

Murat Seker Over a year ago

both are at the same level. <script src="server.js" /> and <link href='/css/styles.css' type='text/css' rel='stylesheet'> should be enough for index.html.

viral gandhi · Accepted Answer · 2017-08-06 17:20:28Z

0

In href attribute you used only one dot instead of two. Your href should be like

  <link href='../css/styles.css' type='text/css' rel='stylesheet'>

answered Aug 6, 2017 at 17:20

viral gandhi

561 silver badge10 bronze badges

1 Comment

Govna Over a year ago

based on my tree i think one dot "." makes sense as i dont want to go up a directory then to the css folder. i have my root folder "mySite", two folders in it, css and js and in my root is my index.html file.

Collectives™ on Stack Overflow

Page CSS will not load - simple html and js file

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related