CSS stylesheet not loading

Question

This is the most silliest question but I dont know why I can't find the problem! Below is the code but css file is not loading.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Title</title>
            <link rel="stylesheet" type="text/css" href="css/layout.css" />
        </head>
    <body>

        <section id="mainWrapper">
        <a href="#" class="btn btn-primary">Hello</a>
      </section>

    </body>

</html>

I checked the source in the browser, it cannot find the file specified! I tried to move file in the root and removed the folder name still the same. It is just the basic template that I was designing and I can't get CSS working!!! Check this image

How are you accessing your html? Are you using a server? If so, how did you set up your server? — Daniel Cheng, Apr 11 '15 at 10:35
The relative path specified assumes you have a folder named `css` in the same folder as this HTML file, and it contains `layout.css`. — Huey, Apr 11 '15 at 10:37
@Daniel-Cheng No server its a simple html css file, a simple template. I am directly opening it. — Vivek Padhye, Apr 11 '15 at 10:42
No, it shouldn't be in the same folder as the HTML, but in a subfolder called CSS. — Huey, Apr 11 '15 at 10:44
@Huey sorry I meant to say I have a css folder in the same folder as of the html file. layout.css is placed in the css folder. even if i try to copy paste the file in the root near the index.html and change the path still it doesnt work — Vivek Padhye, Apr 11 '15 at 10:46
@JC0nde yes HTML is displaying but when i click on css file in the source code it says file not found — Vivek Padhye, Apr 11 '15 at 10:49

score 1 · Accepted Answer · answered Apr 11 '15 at 10:45

1

Check the file name,sometimes when you rename via PC it tends to add layout.css.txt change the file name to just .css.

Move the file to the root where you have you HTML don't create any sub-folders for time being.

Please mention if your trying to upload to a server or just practicing,so we can give you precise instructions.

answered Apr 11 '15 at 10:45

CoDINGinDARK

244
4
16

I checked the file name, it hasnt changed to .txt it is still .css. I moved the file to the root now and changed the path still not working. My other projects are working not this one, it is so annoying! Nor server, just practicing – Vivek Padhye Apr 11 '15 at 10:48
Move everything to a new folder and try,it might work and after moving the css file to the root have you changed the directory in the code ? – CoDINGinDARK Apr 11 '15 at 10:54
I added a 2 new css file and they are working. the layout.css is not working at all. I had renamed it but cant find the problem – Vivek Padhye Apr 11 '15 at 10:59
just copy the text from layout.css to a new text file and paste and rename it.You could post a screenshot of your code and your folder..Here. – CoDINGinDARK Apr 11 '15 at 11:02
I had renamed it to layout.css which made it layout.css.css .... so silly!!! Thank you – Vivek Padhye Apr 11 '15 at 11:02

score 0 · Answer 2 · answered Apr 11 '15 at 10:36

0

Try with full path

 <link rel="stylesheet" type="text/css" href="http://domainname/css/layout.css" />

Also make sure file is accessible.

answered Apr 11 '15 at 10:36

Muhammad Ali Hassan

960
2
12
29

I have other project that uses skeleton css framework, it works without full path. Files are not on server but on my local computer. – Vivek Padhye Apr 11 '15 at 10:45
sometime there is possible you referencing wrong path, then full path may help, recheck folder and file name spelling – Muhammad Ali Hassan Apr 11 '15 at 10:49

score 0 · Answer 3 · answered Jan 21 '19 at 19:43

0

Another tip would be to check that the element ids that the CSS file is using are the same as those outlined in your index.html. If they are different the CSS will not be applied.

answered Jan 21 '19 at 19:43

Patience Mpofu

433
4
9

score 0 · Answer 4 · answered Sep 23 '21 at 16:09

You can do it with specifying the path for it, if you are using windows : go to your css file and click on properties where you will find the path for your css file, just copy and paste it in the below code.

Now confirm that with the path you have added the name of your file. Sometimes the relative paths are not working, you would need the full path. So, above is the procedure.

<link rel="stylesheet" type="text/css" href="add your full path here" />

Note: must see the name of file is included in the path you have copied if not do write it by your own.

CSS stylesheet not loading

4 Answers4

Linked