css file path is right, css code is valid, but it doesn't work

Question

I have a weird, annoying problem. I have a css/ folder and index.html at the root. I load css files in the header as follows:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>blabla</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="keywords" />
    <meta name="description" content="desc" />

    <!-- style files -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
</head>

but the css is not working: I see a plain index.html. I'm sure the css path is right; when I click "view source" and copy/paste the css files path, it shows the css files.

Also, when I copy the css directly into index.html, it works. What could be the problem?

Is there an error in the CSS? I'm guessing a single extra { would cause the entire/rest of the file to not load. — Pluto
– Pluto, Commented Feb 4, 2015 at 16:41

jensgram · Accepted Answer · 2009-11-27 17:59:13Z

2

Probably not served as text/css. Did you check your server config?

answered Nov 27, 2009 at 17:59

jensgram

31.6k6 gold badges83 silver badges101 bronze badges

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

Comments

BalusC · Accepted Answer · 2009-11-27 17:59:53Z

2

The relative URL is likely wrong. To help you further we need to know two things:

What is the full (absolute) URL with which you open the HTML page? Check browser address bar.
What is the full (absolute) URL with which you can open the CSS file individually in your browser?

Once you know both, you can do the math to get the right relative path for use in link tag.

answered Nov 27, 2009 at 17:59

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Comments

Aaron Digulla · Accepted Answer · 2009-11-27 17:58:08Z

1

Try Firefox and Firebug. Have a look in the error console; maybe it's just a small typo.

answered Nov 27, 2009 at 17:58

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

2 Comments

designer-trying-coding Over a year ago

hmm, it says "304 Not Modified" for css files. at Firebug Net tab

Aaron Digulla Over a year ago

304 means that the browser already has the CSS in the cache and thinks it's up-to-date. Try to clear the browser cache.

Pekka · Accepted Answer · 2009-11-27 18:00:51Z

1

It's either the wrong content-type header as jensgram suggests, or the relative path you are giving (css/...) is wrong because the page itself is in a different folder.

Install Firebug and switch to the "net" tab. It will show you if the files failed to load due to a wrong URL.

answered Nov 27, 2009 at 18:00

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

2 Comments

designer-trying-coding Over a year ago

hmm, it says "304 Not Modified" for css files. at Firebug Net tab

Pekka Over a year ago

Hm. That means they get definitely loaded. Then go to the Firefox error console and have it show all messages. If the CSS files' content-type header is wrong (usually text/html instead of text/css), it will say so there. (This can probably be done somewhere in firebug as well but I don't know where.)

Stickers · Accepted Answer · 2015-02-01 02:53:37Z

1

Normally for this kind of problem, I would do:

add a style like body {border:10px solid red !important;} into the css file and refresh the html file.
Check if there is any typo in the path and file names, double check again, use copy/paste the names if necessary.
Use versions, like ... href="css/reset.css?001" ...
Check the folder and files permissions on the server.
Try load it on a different browser or "private mode".

Hope it helps!

answered Feb 1, 2015 at 2:53

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

Comments

Gerrit Bertier · Accepted Answer · 2015-02-02 12:26:23Z

1

+50

Try to use Firebug/Chrome Web Inspector and see if the files load. It might be that the web user has no access rights to the CSS files, in this case you should see that the files can't be loaded and they return a 401 HTTP status. In this case try to set the correct permissions (through CHMOD if it's a Unix server, 0644 should be sufficient).

answered Feb 2, 2015 at 12:26

Gerrit Bertier

4,2412 gold badges23 silver badges38 bronze badges

2 Comments

Antoine Subit Over a year ago

Thanks! When I've look in debug console : ressources aren't loaded. I saw this error for each ressources : ERR_BLOCKED_BY_CLIENT. Then I just disable AdBlock Plugin and it work fine.

Gerrit Bertier Over a year ago

If I have to guess, I'd say it probably has something to do with certain class/id names referenced in your CSS file. Try removing all style definitions and adding them one by one if you have time, so you can see what is causing AdBlock to block the file.

Community · Accepted Answer · 2017-05-23 12:08:45Z

1

Try using the format of:
<link rel="stylesheet" href="/css/file_name_here.css" type="text/css" media="screen">
etc. Though it shouldn't, it may be the order of the parameters that is causing it. This is the order i use and it has always worked for me. I also noticed that you have three <!DOCTYPE> declarations, is this necassery and could it be the cause of this? I have researched and
found that only one is permitted...

Whether or not they are the causes or not, i hope you find the solution soon!

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jan 28, 2015 at 20:32

Salamander115

2711 bronze badges

Comments

Prafulla Kumar Sahu · Accepted Answer · 2020-02-13 11:33:18Z

1

Try this

<link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen"/>

or

  <link rel="stylesheet" type="text/css" href="~/css/reset.css" media="screen" />

edited Feb 13, 2020 at 11:33

Prafulla Kumar Sahu

9,75911 gold badges78 silver badges116 bronze badges

answered Feb 4, 2015 at 11:51

Jas

711 silver badge6 bronze badges

1 Comment

Jan Doggen Over a year ago

If I understand you correctly, this is a trick for the OP to determine if his stylesheet is applied at all. Then please say so. And if this is your intention, it is not an answer, just a comment.

Ozzy · Accepted Answer · 2009-11-27 17:58:22Z

0

Try removing the media attribute. I dont know if that would affect it but its worth a try.

answered Nov 27, 2009 at 17:58

Ozzy

10.7k28 gold badges99 silver badges140 bronze badges

Comments

Antoine Subit · Accepted Answer · 2015-01-28 18:10:10Z

0

Look in debug console if ressources are loaded. If not and if you see this error for each ressources :

ERR_BLOCKED_BY_CLIENT

Just disable AdBlock Plugin.

answered Jan 28, 2015 at 18:10

Antoine Subit

9,9534 gold badges40 silver badges53 bronze badges

Comments

Sonia · Accepted Answer · 2015-01-31 23:37:17Z

0

If you use the whole URL as a path, does it works? If it does, there is something wrong with your path. Try make it absolute by adding a / href="/css/reset.css"

answered Jan 31, 2015 at 23:37

Sonia

1723 silver badges9 bronze badges

Comments

Arjun · Accepted Answer · 2015-02-02 06:16:44Z

0

try it by removing media and type attributes ,May it will work

answered Feb 2, 2015 at 6:16

Arjun

2,2371 gold badge19 silver badges26 bronze badges

Comments

user3509208 · Accepted Answer · 2015-02-02 21:46:44Z

0

Try going directly to the css files. If your url is http://www.xxxx/com try http://www.xxxx/com/css/xxxxx.css. Check if your able to open the css. If not there is a issue with your path

answered Feb 2, 2015 at 21:46

user3509208

5571 gold badge5 silver badges17 bronze badges

Comments

Ranjitsinh · Accepted Answer · 2015-02-04 04:54:28Z

enter image description here

Please create folder structure as per above screen shot.

I have updated all files and its working as expected now.

index.html
-----------------

    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title>blabla</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="keywords" content="keywords" />
        <meta name="description" content="desc" />

        <!-- style files -->
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
    </head>
    <body>
    <div id="reset">
        Reset Div
    </div>

    <div id="layout">
        Layout Div
    </div>

    <div id="global">
        global Div

    </div>

    </body>
    </html>

----------
reset.css
----------
#reset{
color:green;
}

----------
global.css
----------

#global{
    color:red;
}

-----------
layout.css
------------

#layout{
color:blue;
}

We will get below output when we run index.html file.

enter image description here

user1238367 · Accepted Answer · 2015-02-04 13:25:35Z

0

Check the file permissions, you may not have the rights to read the css files. Give read access to everyone.

answered Feb 4, 2015 at 13:25

user1238367

5254 silver badges12 bronze badges

Comments

JTC · Accepted Answer · 2015-02-04 16:08:15Z

0

Some suggestions...

According to W3 :

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

So I suggest using /css/reset.css as path.
<link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />

Howewer if this does not work i would try to add whole address of your website.

Does http://www.yourweb.com/css/reset.css show you anything?

If you could use PHP I suggest add this code to your index file like this:

<?php echo realpath(dirname(__FILE__)); ?>

You will see your absolute path.

Also have you been able to duplicate your problem on external test sites like jsfiddle using url path to your css?

answered Feb 4, 2015 at 16:08

JTC

3,4845 gold badges31 silver badges48 bronze badges

Comments

Jean-François Savard · Accepted Answer · 2015-02-04 16:25:16Z

0

This solution will help only if you are trying to deploy on web, not on a local environment but since there is a lack of detail here, I wanted to specify.

I remember having the same problem and I fixed it adding // before the path to the file as the browser need to know it is loaded from web.

You can verify this easily by pasting the url with and without the // before the css path.

For example

xxx.xxx.xxx.xxx/path/to/css.css

Would not be loaded while

//xxx.xxx.xxx.xxx/path/to/css.css

Would be loaded.

Other possibilities would be

Incorrect permissions
Wrong path, maybe you are missing something ? Try with a slash at the begining or the absolute path.

edited Feb 4, 2015 at 16:25

answered Feb 4, 2015 at 16:19

Jean-François Savard

21k7 gold badges54 silver badges78 bronze badges

Comments

Luis Ramirez · Accepted Answer · 2022-03-05 21:50:07Z

0

For anyone experiencing this behavior in an environment that was published to the web, I would recommend attempting to view it in a different browser or in your phone. I experienced this behavior in Google Chrome through my personal computer and confirmed that my console was blocking the css elements from being viewed. I hosted my website in Filezilla to be specific.

answered Mar 5, 2022 at 21:50

Luis Ramirez

32 bronze badges

1 Comment

Mori Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

css file path is right, css code is valid, but it doesn't work

18 Answers 18

Comments

Comments

2 Comments

2 Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

18 Answers 18

Comments

Comments

2 Comments

2 Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related