html and css not linking

Question

My html and CSS files are not linking even though they're in the same directory. here's my html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <title>temp</title>

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

</head>

I also tried using href="/main.css" and href="./main.css" but to no avail. would appreciate any help!

did you try separating it as an individual folder? or href="../main.css"? — Crystal, Apr 16 '22 at 09:30
@Crystal yeah that's the first thing I tried, sadly it doesn't work out either — moalzoabi, Apr 16 '22 at 09:52
@MaikLowrey I did compile and rerun my server, didn't do the trick unfortunately — moalzoabi, Apr 16 '22 at 09:53
You are able to call your site on your browser? But the styles not working, right? — Maik Lowrey, Apr 16 '22 at 09:56
You are able to call: `http(s)://localhost/main.css`. Did you see your stylesheet? — Maik Lowrey, Apr 16 '22 at 09:58
@MaikLowrey would that even work if my CSS file were to be working? regardless I did try it and nope it didn't show, even when I load up my page, go and inspect element and fetch the sources, my CSS file doesn't show up — moalzoabi, Apr 16 '22 at 10:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243945/discussion-between-maik-lowrey-and-moalzoabi). — Maik Lowrey, Apr 16 '22 at 10:03
@moalzoabi try like this href="../../main.css" or partials/main.css — Crystal, Apr 16 '22 at 10:04

score 2 · Answer 1 · answered Apr 16 '22 at 10:29

2

Use this app.use(express.static('public')); awesome talking to you guys.

answered Apr 16 '22 at 10:29

Crystal

1,845
2
4
16

that is the right solution! +1up from me! – Maik Lowrey Apr 16 '22 at 10:30
1

awesome you guys. glad to help – Crystal Apr 16 '22 at 10:31

score 0 · Answer 2 · answered Apr 16 '22 at 10:37

0

<link rel='stylesheet' href='./main.css' />

i don't know why it is not working for you. but it should work!!! have you tried restarting your app??

try it. close and then restart.

answered Apr 16 '22 at 10:37

sarfaraj shah

144
6

managed to get it fixed, I had to put ```app.use(express.static("public"));``` in my server.js, ty tho! – moalzoabi Apr 16 '22 at 10:41
I did ofc as well end up creating a folder for my css file rather than having it in the same folder as my html. – moalzoabi Apr 16 '22 at 10:42

score -2 · Answer 3 · answered Apr 16 '22 at 09:35

-2

Try adding this snippet after title block

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

answered Apr 16 '22 at 09:35

Priya

11
4

ty for your answer what does bootstrap have to do with it? regardless, I did try it and nothing happened, some tiny changes to some elements happened but I'm not looking to use bootstrap – moalzoabi Apr 16 '22 at 09:56
I assume, you must've worked with bootstrap. I encountered a similar situation and ended up clearing by adding bootstrap. Glad the issue is resolved. – Priya Apr 16 '22 at 11:13
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 16 '22 at 11:34

html and css not linking

3 Answers3