Why styles.css file doesn't apply to the page

Question

I'm moved styles.css file to every location in my project and tried to link it in html file. I moved it even in the same folder where html files are, href autocompletion works(line 9 on image), seems styles.css is visible from html file but still it's doesn't applied to the page. Can't find out the reason...

Answer 1

As far as your syntax for the style link, it's fine. You could get into a browser console (typically hit F12), then browse the page watching the.network tab to make sure the browser finds the css file and loads it.

But I think your problem may be elsewhere. On the code you show, your entire nav (navigation) section is inside the head section of the page (ie before /head appears). That's not where it belongs. It should be inside the body section section further down. That's certainly a problem and may be what you think is a css issue.

• sorry about the edit. I didn't know html tags would be eliminated

Edit: As regards the html MIME type instead of the correct CSS MIME type, you might look at this link and check your server configuration and/or .htaccess file to make sure the server hasn't been told to parse css as if it was html: "The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"

Also please show the CSS file, to confirm it actually is css and not actually html.

Answer 2

I found the problem. It was in express.js code. I didn't use spatial middleware for static files: app.use(express.static(path.join(__dirname, "public"))); here is the documentation page: https://expressjs.com/en/starter/static-files.html

After adding this in server code, in html href should be the rest of path to css file, in my case: