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

user_385559 0
Viewed 282269

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.

css html
24 Answers

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"/>
user_71069150

  1. 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.

  2. 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"

user_80828460

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.

user_56761800

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

user_25780370

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;
}

user_61112410

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.

user_95931230

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

user_120856970

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.

user_51130300

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.

user_159230000
Related