Unable to use styles from CSS file in PHP in development system

Question

I have a PHP page. In the header I have added a style sheet (style.css) like this:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">

  <title><?php echo $user['first'] . ' ' . $user['last'] ?></title>

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />

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

I have the file in the correct location. I am running the code locally using the command php -S localhost:3000

But I keep getting this error

The stylesheet http://localhost:3000/index.php/css/style.css was not loaded because its MIME type, “text/html”, is not “text/css”. index.php

Also, I uploaded this code to my server and it is working fine. I get this issue only while running on my system. I tried to disable cache and open the URL in incognito mode, nothing seems to be working. There is no error in the CSS file, I have validated using jigsaw.w3.org.

Does this answer your question? ["The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"](https://stackoverflow.com/questions/2190459/the-stylesheet-was-not-loaded-because-its-mime-type-text-html-is-not-text-c) — Jay Bhatt, Mar 17 '22 at 02:31

Will B. · Accepted Answer · 2022-03-17T16:29:15.520

Explanation

The issue is caused by the added directory separator / after the .php file extension in /index.php/?user=1 which results in an invalid path and translates the relative path <link href="css/style.css" to become an absolute path of /index.php/css/style.css, subsequently loading index.php as text/html instead of css/style.css.

In the FireFox network tab with style.css selected, if you click the Response option you'll see the rendered index.php page.

There is something more going on in your code that we can't see that may be causing the addition of the directory separator to index.php/, or was a typo in one of your links or browser URL.

Resolution

To prevent issues with relative pathing obscurity and ensure the resources will load without depending on the location of the file, it is best-practice to use absolute paths (relative to document root) for file and link references by prepending them with /.

HTML

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

<!-- other examples -->
<a href="/index.php?user=1">Link</a>
<img src="/path/to/img.ext">

CSS

@import '/path/to/stylesheet.css';
background-image: url('/path/to/img.ext');
@font-face {
   src: url('/path/to/font.woff');
}

It is also best-practice for file locations in PHP to prepend paths with __DIR__ or in older versions of PHP dirname(__FILE__), to enforce pathing from the directory of the script file.

PHP

include __DIR__ . '/path/to/script.php';
include __DIR__ . '/../path/to/script.php';
file_get_contents(__DIR__ . '/path/to/file.ext');
fopen(__DIR__ . '/path/to/file.ext', 'r');
//...

Calvin Tanuri · Answer 2 · 2022-03-17T04:16:19.167

-1

You got this error because it's currently using the CSS from https://www.w3schools.com/w3css/4/w3.css so it's ignoring your CSS and resulting it to not loaded. Try removing this line of code <link href="css/style.css" type="text/css" rel="stylesheet"> Also, the error is also caused because of an incorrect file path. This also always happened to me only in PHP. So define the file path by updating this line of code <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" /> to <link rel="stylesheet" href="/css/style.css" /> or like this <link rel="stylesheet" href="http://localhost:3000/css/style.css" /> Here is the new code:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">

  <title><?php echo $user['first'] . ' ' . $user['last'] ?></title>

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

</head>

edited Mar 17 '22 at 04:16

answered Mar 17 '22 at 03:57

Calvin Tanuri

69
10

The OP does not need to remove the [`w3.css`](https://www.w3schools.com/w3css/defaulT.asp) which is a standard CSS bootstrap. I do not understand why you think it would cause `css/style.css` to not load, without testing it first. The relative pathing issue of `href="css/style.css"` vs `href="/css/style.css"` has no bearing on it being written in PHP or not, operating the same in any language interpreted as `text/html` in the browser. See [RFC-1808](https://datatracker.ietf.org/doc/html/rfc1808) for more details. – Will B. Mar 17 '22 at 12:36
@WillB. OP doesn't need to use 2 CSS files at the same time except if 1 CSS file is for mobile devices. to do it just combine it with the OP's own CSS file. – Calvin Tanuri Mar 18 '22 at 03:59
While it may not be "needed" to load multiple CSS files, there is no benefit to combining them, except to reduce initial file download requests. You stated, "*You got this error because it's currently using the CSS from `...w3.css` so it's ignoring your CSS and resulting it to not loaded.*" which is not true. Loading multiple CSS files is supported in all browsers because they are intended to "cascade" from first to last. Allowing for parts of CSS file1 to be extended/overridden by CSS file2, and so on. This is why CDN sources, like bootstrap and W3, are used so often. – Will B. Mar 18 '22 at 13:35

Unable to use styles from CSS file in PHP in development system

2 Answers2

Explanation

Resolution