unable to load external CSS in html file

Question

I am working on a front end project where my folder structure is :

FOLDER:BILL
   FOLDER:CSS_FILES
       file :style.css
   FOLDER:HTML_FILES
       file:index.html
       FOLDER:IMAGES
          image.png

This is how I load CSS in my html file and it does not work .

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

I don't understand why as I have included the whole path . Maybe I should insert the css folder in the html one where it should work but I would like to know if there is another solution . Thank you in advance .

is your file css displayed in <head> tag?

s.kuznetsov
– s.kuznetsov

2020-07-22 08:55:13 +00:00
Commented Jul 22, 2020 at 8:55 — s.kuznetsov
– s.kuznetsov, Commented Jul 22, 2020 at 8:55
@sergeykuznetsov yes

Vasilis Skentos
– Vasilis Skentos

2020-07-22 08:55:43 +00:00
Commented Jul 22, 2020 at 8:55 — Vasilis Skentos
– Vasilis Skentos, Commented Jul 22, 2020 at 8:55

Derick · Accepted Answer · 2020-07-22 09:03:18Z

1

You should use it like:

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

answered Jul 22, 2020 at 9:03

Derick

1532 silver badges9 bronze badges

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

Comments

elia mantoet · Accepted Answer · 2020-07-22 08:53:55Z

1

The correct href is "../CSS_FILES/style.css"

answered Jul 22, 2020 at 8:53

elia mantoet

435 bronze badges

Comments

Quentin · Accepted Answer · 2020-07-22 08:54:17Z

1

You haven't included the whole path.

You've included a relative path.

Assuming the URL of the HTML document is http://example.com/HTML_FILES/index.html then href="BILL/CSS_FILES/style.css" will resolve to http://example.com/HTML_FILES/BILL/CSS_FILES/style.css.

If you want to start from http://example.com/ then you need to use an absolute path which will start with a /:

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

answered Jul 22, 2020 at 8:54

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Mansi · Accepted Answer · 2020-07-22 10:31:46Z

0

There are two types of path. Absolute and relative. So for absolute path, it should start with main directory, where as in relative path,the directories are according to your present working directory. So the correct path is

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

answered Jul 22, 2020 at 10:31

Mansi

33 bronze badges

Collectives™ on Stack Overflow

unable to load external CSS in html file

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related