Resource interpreted as stylesheet but transferred with MIME type text/html

# Table of Contents

# Resource interpreted as stylesheet but transferred with MIME type text/html

The warning "Resource interpreted as stylesheet but transferred with MIME type text/html" occurs when:

Your browser makes an HTTP request to a server or to fetch a stylesheet form a URL.
The server responds with a Content-Type of text/html for a stylesheet where the Content-Type should be text/css instead.

The message is just a warning and not an error because your browser is able to figure out that the file is a stylesheet and not an HTML file even though its MIME-type (content-type) is set to text/html.

The first thing you should check is whether the stylesheet (your .css file) has the correct Content-Type request header set.

Open the developer tools in your browser by right-clicking on the page and selecting Inspect or simply press F12.

right click inspect

Click on the Network tab and refresh the page by pressing F5.
Select the .css file in the left sidebar.
In the Headers tab, under Response Headers, check if the Content-Type header is set to text/css.

The Content-Type header should be set to text/css when serving flies that have the .css extension.

# Make sure the `<base />` tag is set correctly if you've set it

If you've set the base tag in your .html file, make sure it is set correctly.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <base href="/" />

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

  <body>
    <!-- ... -->
  </body>
</html>

The base tag specifies the base URL to use for all relative URLs in the HTML document.

There can only be 1 base tag in a document.

The base tag has to be in the head tag.
The base tag has to be placed above any other tags that load resources (e.g. CSS stylesheets).

You can just place the base tag at the top of your head tag.

# If you use Angular, use `ng-href` instead of `href`

If you use Angular.js, try to use ng-href instead of href.

Replace this:

index.html

Copied!
<!-- ⛔️ incorrect -->
<a href="http://www.gravatar.com/avatar/{{hash}}">link1</a>

With this:

index.html

Copied!
<!-- ✅ correct -->
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>

# Make sure the path in your `link` tag is correct

The error is also caused when the href property of your link tag is set incorrectly.

For example, the following href attribute assumes that you want to load a style.css file that is located in the same directory as your index.html file.

index.html

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

The link tag above assumes that you have the following folder structure.

shell

Copied!
my-project/
  └── index.html
  └── style.css

You could also specify the path as follows.

index.html

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

The ./ prefix followed by a filename indicates that the file is located in the same directory.

If you need to link to a stylesheet starting at the root directory, prefix the path with /.

Suppose you have the following folder structure.

shell

Copied!
my-project/
  └── pages/
    └── index.html
  └── style.css

You would use the following path to load the style.css file from your pages/index.html file.

index.html

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

The / prefix indicates that the path starts at the root directory of the project.

We could've also used the following path to achieve the same result.

index.html

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

The ../ prefix means "go one directory up".

The index.html file is located in the pages/ directory, so we have to go one directory up to load the style.css file.

Suppose you have the following folder structure.

shell

Copied!
my-project/
  └── pages/
    └── public/
      └── index.html
  └── style.css

You can load the style.css file into your index.html file as follows.

index.html

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

As previously noted, the / prefix means "start the path at the root of the project".

You can also load the stylesheet by going 2 directories up.

index.html

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

The first ../ prefix goes one directory up (into the pages/ directory) and the second ../ enables us to go one more directory up (into the root of the project).

Suppose you have the following folder structure.

shell

Copied!
my-project/
  └── pages/
    └── public/
      └── index.html
  └── stylesheets
    └── style.css

One way to load the stylesheets/style.css file is to start from the root of the project.

index.html

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

Alternatively, you can use the following path.

index.html

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

We go 2 directories up, then go into the stylesheets directory and load the style.css file.

# Make sure the name of the CSS file is not misspelled

Another common cause of the error is when you misspell the name of the CSS file in your link tag.

Note that the names of files are case-sensitive.

The following 2 link tags try to load different stylesheets (buttonStyles vs buttonstyles) - (camelCase vs all lowercase).

index.html

Copied!
<link type="text/css" rel="stylesheet" href="buttonStyles.css" />

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

Make sure the name of the CSS file is not misspelled.

# Make sure your Web server is configured correctly

Your web server (e.g. Nginx or Apache) has to be configured correctly to serve .css files.

For example, if you use Nginx, you could add the following to your config file (e.g. /etc/nginx/conf.d/default.conf or /etc/nginx/nginx.conf).

/etc/nginx/conf.d/default.conf

Copied!
location ~ \.css {
    add_header  Content-Type    text/css;
}

location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Resource interpreted as stylesheet but transferred with MIME type text/html

# Table of Contents