html file does not identify CSS

Question

I went for a style on the page and HTML does not use the CSS file. First I put it like this:

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="bootstrap.css">

And on the console gave this message:

Resource Interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:4000/main.css".

So I put: <link rel="stylesheet" type="text/css" href="main.css"> and kept on giving the same message.

I switched to <link rel="stylesheet" type="text/html" href="bootstrap.css"> and the message stopped from Dart on the console, but my Stylos don’t work, it’s like I haven’t called anything, and the files are in the same index folder. What can it be?

************ Updates ***********

As you requested, follow server code:

var http = require('http').createServer(server);
var fs = require('fs');

function server(req, response){
    response.writeHead(200);
    response.end(fs.readFileSync('view/index.html'));
};

http.listen(4000, function(){
  console.log("x------------------x");
  console.log("x Servidor On-line x");
  console.log("x------------------x");
});`

Answer 1

Your MIME type is wrong, is not type="text/html" is type="text/css"

So he doesn’t carry:

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

The right thing to do:

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

A tip is to use the DevTools of Chrome for example to check if the file .CSS correctly loaded. No Chrome open your document, press F12, goes in the Aba Network, make the CSS and after a F5

Answer 2

Opa so you can load a css file from a directory on Node.js you first need to determine the static folder where these files are, what you can do is the following:

• Create a folder at the root of the project called public
• Inside this public folder you place the folder with your css files

Dai in your app.js will put the following command if you are using express

app.use('/public', express.static('public'));

And inside your index html file instead of staying:

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

Will stay:

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

I hope it helps

Answer 3

Let’s start with the explanation:

Browsers make HTTP requests for servers. The server then makes an HTTP response.

Both requests and responses consist of multiple headers and a body (sometimes optional) with some content.

If there is a body, then one of the headings is the Content-Type what describes the body (is it an HTML document? An image? The content of a form submission? Etc.).

When you request your stylesheet, your server is telling the browser that it is an HTML document (Content-Type: text/html) instead of a style sheet (Content-Type: text/css).

Change of Content-Type: text/html:

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

for:

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