Complete list of reasons why a css file might not be working

Question

Here is the head of my .html file:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="http://fakedomain.com/smilemachine/html.css" rel="stylesheet"/>
<title>Common Questions</title>
<script language="javascript">

function show(name) {
  document.getElementById(name).style.display = 'block';
}
</script>
</head>

And my html.css file is indeed where it should be. But I'm getting absolutely no styling whatsoever.

Okay, so now I'm just trying to fix the problem locally on my machine. Here is the head:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="cover.css" rel="stylesheet" type="text/css"/>
<title>Common Questions</title>
<script language="javascript">
function show(name) {
  document.getElementById(name).style.display = 'block';
}
</script>
</head>

and now the css:

BODY {
    font-size: 18pt; 
    color:#000fff;  
    font-family: Helvetica; 
    margin: 0 9 9 9;
}

table {
    font-size: 8pt; 
    color:#525252;  
    font-family: Helvetica; 
    margin: 0px;
    border-collapse: separate;
}

th {
    font-size: 10pt; 
    text-align: left;
    color:#550055;  
    font-family: Helvetica; 
    border-color: #999;
    border-width: 0 0 1px 0;
    border-style: dotted;
}

td {
    font-size: 10pt; 
    text-align: left;
    color:#550055;  
    font-family: Helvetica; 
    border-color: #999;
    border-width: 0 0 1px 0;
    border-style: dotted;
}

.left {
    display:inline-block;
    font-size: 10pt; 
    color:#990055;  
    font-family: Helvetica; 
    margin: 0 0 5 0;
}

.right {
    display:inline-block;
    font-size: 18pt; 
    font-weight: bold;
    float: right;
    color:#525252;  
    font-family: Helvetica; 
    margin: 0px;
}

.question {
    display:inline-block;
    font-size: 18pt; 
    font-weight: bold;
    float: right;
    color:#B452CD;  
    font-family: Helvetica; 
    margin: 0px;
}

Okay I've made some progress. The firebug suggestion was really good. I saw that the link to the CSS file was being read as Chinese characters. This was UTF encoding problem so I just opened my files in a text editor and then saved them as UTF-16.

But now it is reading the wrong data from the css file! I have uploaded the css file below, but in firebug it is showing a two liner.

This may not help. But is there any reason why you are using a full URL for your css file? Why not just use /smilemachine/html.css? — LeeR, Aug 04 '11 at 11:51
I just thought an absolute url would be more of a sure thing. Like it would be guaranteed to work. — Eric Brotto, Aug 04 '11 at 11:55
It's rather opposite ;-) A relative URL will work in more cases. — Arsen7, Aug 04 '11 at 12:17
If it is a minified CSS file check whether there are any comments at the start of the minified file which is commenting out the whole content ahead? I had that problem and then I came across https://support.mozilla.org/bm/questions/1004201#answer-586876 doing which I found that my page and CSS encoding didn't matched. But fixing it also my styles were not getting applied. Then looking at the "Style Editor" in Web Developer Tools in Firefox I noticed the my minified stylesheet starting with `/*` so removing it the styles got applied. Hope this helps. — Jignesh Gohel, May 31 '23 at 11:31

score 30 · Accepted Answer · answered Aug 04 '11 at 12:05

30

Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.
(If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?

answered Aug 04 '11 at 12:05

Nivas

18,126
4
62
76

1

Accepted for the same reason (the Firebug suggestion :) – Eric Brotto Aug 04 '11 at 14:26
2

My CSS didn't work because a weird invisible character got pasted when taking code from the web. I found it by checking the CSS in the following site: https://jigsaw.w3.org/css-validator/ I just rewrote manually the code in a new file and everything worked. – Alexis Dec 25 '20 at 17:54
Thank you very much, @Alexis. It showed the error: `I/O Error: Unknown mime type : text/plain;charset=UTF-8`. It appears both PHP function (`mime_content_type`) and 'file -bi' Unix command had been returning the above. Also, `text/x-c++` for `.js` files. Temporarily hardcoded, and will try investigating further. – Artfaith Dec 22 '21 at 00:33

score 12 · Answer 2 · edited Apr 11 '14 at 11:19

12

Firefox can reject a stylesheet if it is not served with a content type of "text/css". (This is separate from the 'type="text/css"' declaration in the HTML.)

edited Apr 11 '14 at 11:19

Ashish Aggarwal

3,018
2
23
46

answered Aug 04 '11 at 12:15

Matthew Wilson

3,861
21
14

1

Thanks! My system was sending down css content in files with a `.scss` file extension. Setting the Content-Type to `text/css` for these files in my reverse proxy did the trick. – BruceJo Nov 29 '21 at 21:25

score 9 · Answer 3 · answered Aug 04 '11 at 11:52

9

Try:

<link type="text/css" rel="stylesheet" href="http://fakedomain.com/smilemachine/html.css" />

If that doesn't work either, then make sure the URL is accessible, and the content is what you are looking for.

answered Aug 04 '11 at 11:52

Shef

44,808
15
79
90

2

My guess is on the missing type="text/css" in the sample. – NetSquirrel Aug 04 '11 at 12:00
@Eric Brotto: Are you sure the contents of the css file are loaded correctly, and not messed up because of some rewrite rule. Can you step in with Firebug to inspect the content of loaded CSS file? Can we see a live example of this, so we can debug hands-on the issue? – Shef Aug 04 '11 at 13:10
Thanks for the effort Shef. Please see my EDIT 2. – Eric Brotto Aug 04 '11 at 14:12
1

@Eric Brotto: There is no need to save your file as `UTF-16`, `UTF-8` is fine and recommended. I don't see where is the problem in the provided link. In your question you are asking about an external css file, however in the provided link you have used inline css. So, what is the issue now? – Shef Aug 04 '11 at 14:19
D'oh! It seems like there was a piece of javascript that was importing a separate css file (I think). Anyway, all is good now. (@Shef Thanks for pointing out the inline css :) – Eric Brotto Aug 04 '11 at 14:25
1

Actually, ignore that bit about the javascript. I really do think everything has to do with the UTF encoding. – Eric Brotto Aug 04 '11 at 14:51

score 7 · Answer 4 · answered Aug 04 '11 at 11:54

7

Could it be that you have an error in your CSS file? A parenthesis left unclosed, a missing semicolon etc?

answered Aug 04 '11 at 11:54

1

This was my problem. Fixing the css file made the difference. – woodge Sep 23 '17 at 12:01

score 6 · Answer 5 · answered Nov 13 '19 at 20:18

6

In my case, the problem was with the media option:

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

I solved by removing it:

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

answered Nov 13 '19 at 20:18

Rexcirus

2,459
3
22
42

This is great. Now I can get all CSS back into one single file and don't have to worry about in which component it is. – Wizard of Kneup Jan 26 '23 at 08:26

score 5 · Answer 6 · answered Jul 15 '15 at 06:07

I stylesheet may not get loaded for several reasons. But the main approach to solve such a problem is as follows:

1. After loading the page, press F12 to open the Developers Console. Check the console for any logged errors.

2. Then you should check the Stylesheet tab and see the list of stylesheets the browser loaded.

3. The URL you're using inside your HTML link tag may be unaccessable, so manually try to visit the stylesheet with a browser and see if everything renders correctly.

4. Any typo inside your HTML or CSS stylesheet may cause the stylesheet from loading.

5. Check for any occurrences of fatal errors before your <link> tag. A fatal error may stop the running code and suspend the page, thus not including your stylesheet.

Hope that helps.

score 5 · Answer 7 · answered Feb 16 '12 at 19:32

5

I had the same problem - I changed my text encoding to UTF-16 on my index file and my css file would show up blank when I'd try to load the page in the browser. I figured out by much trial and error that your html and css files have to have the same encoding! I don't know if this would work for you but it did for me.

answered Feb 16 '12 at 19:32

Whitney

51
1
1

Thanks, your answer helped. I had the same problem: the html file somehow encoded as UTF-16 and the CSS/JS files as UTF-8... – BBog Dec 30 '12 at 21:20
Once the CSS file was edited and saved using Visual Studio, I got a similar issue. When the HTML was also edited in Visual Studio, the issue got fixed. Thanks for the hint on encoding. – MGR Jun 26 '19 at 10:59

score 2 · Answer 8 · edited Aug 24 '15 at 07:53

2

I had a problem like this! I was able to fix it following

Step 1>>from Abraar Arique post, I went into the console>> Went under Style Editor and found Firefox wasn't loading the updated copy of my css file.

I cleared all history and reload the page then my problem was fixed.

edited Aug 24 '15 at 07:53

MarmiK

5,639
6
40
49

answered Aug 24 '15 at 07:47

Dwain Beckford

21
1

score 2 · Answer 9 · answered Aug 04 '11 at 11:56

2

Copy the css file's url and paste it into your browser. If it doesn't load the file than you know the problem is in the url.

answered Aug 04 '11 at 11:56

JanLikar

1,296
9
22

score 1 · Answer 10 · answered Apr 30 '12 at 13:59

1

I had the same problem, chinese characters were appearing in firefox when uploaded to web server, but not on localhost. I copied the contents of the css file to a new text file. All working now. Must have been a unicode/encoding error of some sort.

answered Apr 30 '12 at 13:59

James Pitt

451
2
8
19

score 1 · Answer 11 · answered Nov 23 '15 at 18:22

I was facing the same problem, but the reason was the styling in the css is wrapped in an ID that is not exist

#navi ul{
    color: red;
}

the #navi selector is nowhere in the HTML because i forgot to add it before writing the CSS. in my case I worked with Less file so I nested it like this

#navi{
    ul{
       color:red;
   }
}

I hope this help to re-check when things doesn't work

score 1 · Answer 12 · answered Dec 19 '16 at 12:43

New one for you Guys !

During my Gulp minification process

<!-- build:css /css/project-mini.css -->
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/splash.css"/>
    <link rel="stylesheet" href="css/header.css"/>
    <link rel="stylesheet" href="css/print.css" media="print"/>
<!-- endbuild -->

Last CSS file was for print and the generated output gave me

    <link rel="stylesheet" href="css/project-mini.css" media="print"/>

So because of media="print" all CSS rules were skipped !

Vikas Bansal · Answer 13 · 2019-06-17T11:02:37.457

I had the same problem, and I used the UTF-8 coding for both of my files as follows:

add @charset "UTF-8"; in CSS file and <meta charset="UTF-8"> under <head> tag in HTML file. and it worked for me.

it makes the same encoding for both the files i.e HTML and CSS.

You can also do the same for "UTF-16" encoding.
If it is still not working check for the <link type="text/css" rel="stylesheet" href="style.css"/> under <head> tag in HTML File where you should mention type="text/css"

score 1 · Answer 14 · answered Aug 04 '11 at 11:56

I don't think the problem lies in the sample you posted - we'd need to see the CSS, or verify its location etc!

But why not try stripping it down to one CSS rule - put it in the HEAD section, then if it works, move that rule to the external file. Then re-introduce the other rules to make sure there's nothing missing or taking precedence over your CSS.

score 0 · Answer 15 · answered Jan 29 '18 at 07:06

0

I have another one. I named my css file: default.css. It wouldn't load. When I tried to view it in the browser it showed an empty page.

I changed the name to default_css.css and it started working.

answered Jan 29 '18 at 07:06

mikekehrli

332
3
10

score 0 · Answer 16 · answered Aug 30 '19 at 17:05

I'm using Wordpress and the stylesheet was set to enqueue to the footer

wp_enqueue_style(
        'editor-css',
        $stylesheet_directory_uri . '/assets/css/editor.css',
        ['wp-edit-blocks'],
        null,
        true   // $in_footer
    );
}

This resulted in a media="1" attribute getting added to the <link> tag and resulted in the stylesheet being loaded but not applied.

Changed the parameter to false and its working now

score 0 · Answer 17 · answered Dec 10 '20 at 15:31

I don't know if some people are loading first RESET.CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

score 0 · Answer 18 · answered Apr 07 '21 at 18:16

0

There was an error in my html file. Seems like code editors do not catch html tag errors. While editing the html file, my editor added a closing tag for input which I missed. Removing this solved my problem and CSS file is now getting loaded.

answered Apr 07 '21 at 18:16

Akshata Dabade

477
5
10

score 0 · Answer 19 · edited Apr 11 '14 at 11:19

0

My simple think you missed type="text/css".

edited Apr 11 '14 at 11:19

Ashish Aggarwal

3,018
2
23
46

answered Aug 04 '11 at 12:06

anglimasS

1,304
2
16
41

score 0 · Answer 20 · answered Aug 04 '11 at 13:19

If your URL is working and loads the file correctly, and you've said that adding the correct

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

code doesn't fix it, then the only other problem is that's it's an error in the actual .css file. And to advise you on that, we'd need to see the file.

What you can do though is write one basic <div> tag into your HTML, add in a basic CSS rule into your existing file, then see if you can influence this tag with your new CSS rule.

score 0 · Answer 21 · answered Oct 24 '21 at 19:00

0

I was facing the issue of css not loading and hard reload worked for me. Hard reload in chrome => CTRL + SHIFT + R

answered Oct 24 '21 at 19:00

jestrabikr

420
5
12

Artfaith · Answer 22 · 2021-12-22T00:55:55.363

It may be an invalid Multipurpose Internet Mail Extensions (MIME) (more) type set on backend.

Some solutions like PHP function mime-content-type (more) or Unix command file -ib (more) may return quite unexpected results sometimes like text/plain for *.css and text/x-c++ - *.js.

A debugger (i.e. DevTools) or online validator (i.e. mentioned by @Alexis) may help.

For example, the above validator showed:

I/O Error: Unknown mime type : text/plain;charset=UTF-8

for a *.css file downloaded from a webserver/backend. The webserver passed this MIME type in headers, and since the required type should be text/css the browser ignored the stylesheet even with type="text/css" attribute set in HTML.

score 0 · Answer 23 · answered Dec 08 '22 at 08:56

Not sure why it happened but, when i was using this

<a href="https://example.com/signup.php/">Create A New Account</a>

clicking on this anchor would show the page and not load any CSS stylesheet

i removed the last '/' and it works now.

<a href="https://example.com/signup.php">Create A New Account</a>

score -1 · Answer 24 · answered Aug 04 '11 at 12:11

-1

The URL http://fakedomain.com/smilemachine/html.css in your <link> Tag is wrong. File not Found.

answered Aug 04 '11 at 12:11

Ahsan Rathod

5,465
2
21
25

1

It's because it is not my real domain! – Eric Brotto Aug 04 '11 at 12:13
Yes I know it a fake, but your file is missing, this is the problem – Ahsan Rathod Aug 04 '11 at 12:14
7

No it's not. He's using the real URL in his actual code, duh! – bart Aug 04 '11 at 12:33

score -2 · Answer 25 · answered May 16 '21 at 05:59

-2

The Error is quite funny

By the looks of it, I think the error is in the script function, bro.

document.getElementByIt('name')

The nodes have to be within quotes.

If your stylesheets are linked this shall work with the script.

Also, for stylings, you can try inline CSS or creating tags in .HTML file and put all your styles there.

answered May 16 '21 at 05:59

Dwaipayan Chakroborty

213
2
10

1

creating tags. That way, you can get rid of the extra work of linking your .css file to the head of the HTML doc. however, a separate css file just makes the code look clean and easily manageable. – Dwaipayan Chakroborty May 16 '21 at 06:00

Complete list of reasons why a css file might not be working

25 Answers25

Linked

Related