CODEWITHSUNDEEP
cssnode.js
Govna
Govna

Reputation: 383

Page CSS will not load - simple html and js file

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:

enter image description here

Upvotes: 0

Views: 98

Answers (2)

viral gandhi
viral gandhi

Reputation: 56

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'>

Upvotes: 0

Murat Seker
Murat Seker

Reputation: 916

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. ../

Upvotes: 2

Related Questions