Unable to use styles from css file in PHP in development system-CodePudding

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

CodePudding user response：

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 the browser.

To ensure you do not encounter these types of obscure issues with relative pathing, it is best-practice to use absolute paths (relative to document root) for file and link references by prepending them with / and in PHP include files to prepend them with __DIR__

<link href="/css/style.css" type="text/css" rel="stylesheet">
<a href="/index.php?user=1">Link</a>

include __DIR__ . '/path/to/script.php';
include __DIR__ . '/../path/to/script.php';

CodePudding user response：

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>