External CSS file not loading in HTML file

Question

I'm trying to use loading animation using jQuery. I've tried different paths for css file like

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

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

but still CSS file is not getting loaded in the html file. When I kept the CSS file in the same folder as the html file then it worked correctly.

My folder structure...

index.html

 <html>
 <head>
 <title>Loading Animation using jQuery</title>
 <script src="js/jquery.js"></script>
 <script src="js/jquery.backstretch.js"></script>
 <link href="css/animation.css" type="text/css" rel="stylesheet">
 </head>
 <body>
 <div id="loader">
 </div>
 <h2>Hi There</h2>
  <script>

    $(window).load(function(){
        $("#loader").delay(10000).hide(0).fadeOut("slow");
    });
  </script>
 </body>
 </html>

animation.css

   #loader{
    z-index:999999;
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249); 
     }

The js files are being loaded correctly but the css file is not..Can't understand where I'm going wrong..

what is your folder structure? how are you html and css files placed? — gurvinder372
– gurvinder372, Commented Dec 9, 2015 at 7:03
@gurvinder372 The css file is placed inside css folder as shown in the screenshots above..Please tell me if any extra information is required. — Lucy
– Lucy, Commented Dec 9, 2015 at 7:05
Have you tried looking in your console? There could be errors from your JavaScript files that are preventing your CSS from loading. You should place your CSS before your script tags to prevent this from occurring. — Monica Olejniczak
– Monica Olejniczak, Commented Dec 9, 2015 at 7:06
I suggest using the developer console in your browser to find out what's wrong. — Jodi Supporter
– Jodi Supporter, Commented Dec 9, 2015 at 7:06
In chrome, go to developers tools by F12, go to network and filter by CSS type if necessary, if the file is displayed in red then it hasn't been loaded; so right click and open link in new tab to check the absolute path in the address bar to identify the issue. — Khaled
– Khaled, Commented Dec 9, 2015 at 7:08

rahul · Accepted Answer · 2015-12-09 19:56:44Z

2

There should not be any problem with loading your CSS file,

since the folder CSS is in the same directory level as your HTML file.

But the image thats being used in the CSS file is one level up from your CSS file.

Try changing

background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

to

background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

edited Dec 9, 2015 at 19:56

answered Dec 9, 2015 at 7:15

rahul

188k50 gold badges239 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jibin Balachandran · Accepted Answer · 2015-12-09 07:09:00Z

0

Open your project in editor, go to the folder where your css file is there. Drag and drop your css file on to the code. It will automatically generate the path for you. Hope this will help.

answered Dec 9, 2015 at 7:09

Jibin Balachandran

3,4491 gold badge27 silver badges39 bronze badges

Comments

Yasser Shaikh · Accepted Answer · 2015-12-09 07:11:05Z

0

Open your developer tools, in the network tab - select the CSS option. Should should see something like the image below.

In your case it should be 404, you can copy the full link that is request by the browser and debugging and fixing then will be easier for you that way.

answered Dec 9, 2015 at 7:11

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

Comments

sandeep pandharpure · Accepted Answer · 2015-12-09 07:12:45Z

0

i saw ur folder structure as per your structure following is right link of your external css link.

and also check animation.css is available in css folder

answered Dec 9, 2015 at 7:12

sandeep pandharpure

396 bronze badges

Comments

Anu · Accepted Answer · 2015-12-09 07:17:51Z

0

if you are running this application in chrome browser. Just press clt+shift+j OR F12 to see the error.Like the attached image you can see the error on console tab, just fix that

answered Dec 9, 2015 at 7:17

Anu

1

Comments

Chathuranga Ranasinghe · Accepted Answer · 2015-12-09 07:18:59Z

0

You can give reference to your CSS file using below code

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

But you have to modify your CSS file

background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

answered Dec 9, 2015 at 7:18

Chathuranga Ranasinghe

5471 gold badge5 silver badges22 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:00:43Z

0

You need to determine first whether the CSS file is actually not loaded by checking the network tab as Yasser stated.

If the CSS is not loaded, then you need to check if the CSS file animation.css actually exist in your CSS folder.
If the CSS is loaded, then, take help of developer tools to understand what CSS is being applied. If there is a trouble in that, please share the same.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Dec 9, 2015 at 7:20

hkasera

2,1563 gold badges23 silver badges34 bronze badges

Collectives™ on Stack Overflow

External CSS file not loading in HTML file

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related