Cache issue.

Try changing

<link rel="stylesheet" href="index.css">

to

<link rel="stylesheet" href="index.css?v=<?php echo time(); ?>">

This will force the CSS to reload.

Answer from Dampen59 on Stack Overflow
🌐
DaniWeb
daniweb.com › programming › web-development › threads › 437825 › css-not-working-from-header-php-include
html css - CSS not working from header.php include [SOLVED] | DaniWeb
So if your stylesheet href is a relative path that only works when header.php is opened directly, it can 404 when the same markup is rendered from admin/index.php. Quick check: view source on admin/index.php, click the stylesheet link, and confirm it loads. Also open DevTools Network tab and look for a 404 on the CSS request.
Top answer
1 of 3
12

From you comments on existing answers, it doesn't look like something we could find out based on the provided code. Here are a couple of things that could help you diagnose the problem though.

In your browser, open up developer tools. (For Firefox, get Firebug and hit F12, For Chrome or Opera, just hit F12 for the built in tools.)

Then you want to open up the network tab ('Net' in Firebug, 'Network' in Chrome)

Once you have that open, reload the page and look at the server requests. One of them will be for your CSS file. What you want to look for is the HTTP status. If that Status is anything starting with a 4, you've got trouble. Either it's a 403 which means you don't have the correct permissions to load the file, or you'll have a 404, as we all know, 'not found', which would indicate that your URL is faulty.


Another way to quickly find out whether the file is actually loading is to view the source of the page in the browser, and click the link to the CSS file. In Firefox, doing that makes the source viewer load the contents of the CSS file instead. If that doesn't work out, you also get an idea that it can't be accessed. It's worth noting that the first method will make it clearer what exactly the issue is though.

Most likely I assume you have a typo in your capitalisation of the file name or path. If it is hosted on a non-windows server, that almost certainly makes a difference.

2 of 3
3

The <link> tag should be within your <head> tag, also consider using absolute "/" path rather than relative if you have sub directories.

🌐
Reddit
reddit.com › r/phphelp › php not identifying css files
Php not identifying css files : r/PHPhelp
October 16, 2024 - ... Sorry, this post was deleted by the person who originally posted it. Share ... It is possible the link in your web page is not what you think it is. That's especially true if you use a relative link (like css/mystyle.css) rather than an absolute link (like /css/mystyle.css).
🌐
Thesassway
thesassway.com › why-css-is-not-working-with-php
Why CSS Is Not Working With PHP – TheSassWay.com
CSS (Cascading Style Sheets) is ... display a document written in HTML or XML. CSS is not working in PHP because PHP is a server-side scripting language and CSS is a client-side styling language....
Find elsewhere
🌐
YouTube
youtube.com › watch
PHP #14 : My Css File Is Not Working In My Php Pages (Solved) - الدارجة المغربية - YouTube
Hello everyone !!In this video inchaeAllah, we will learn how to solve a little problem that anyone can suffer from in his PHP projects related to CSS.The so...
Published   July 17, 2020
🌐
YouTube
youtube.com › watch
css /js is not working |how to fix css/js and php problem| why is css not updating |2021| - YouTube
hello guys in this video you be able to solve the css and php common problem when you debug your code and you bring some changes in your css it isn't applies...
Published   February 26, 2021
🌐
Reddit
reddit.com › r/phphelp › can php files interfere with css files?
r/PHPhelp on Reddit: Can PHP files Interfere With CSS Files?
December 7, 2020 -

I recently made a website locally. A PHP file, a CSS file and then another PHP file to handle the database actions (which was to be activated later after it was moved to a server).

When I made the website locally, my CSS file was successfully updating the apperance of my index.php file.

I then moved all these files to a local server folder and that's when it started to act funny. It seems like my index.php file is using the CSS file because its background is still black. However in my CSS file, when I change the background color from black to any other color, the website still remains black. Its not detecting any changes in the CSS file.

But when I deliberately mispell the name of the CSS file in the stylesheet link in my index.php, the website turns default white. Which means it is succesfully using that file to get the black background.

What is going on!? In my index.php, I used an include statement to to include the other PHP file that handles the database actions. Everything is working fine, but modifying the CSS file is not having any effect on the website.

🌐
SitePoint
sitepoint.com › php
Css not loading with an include - PHP - SitePoint Forums | Web Development & Design Community
March 23, 2011 - I have a problem including a file which in itself has a css style this is my index file <?php require_once ('restricted/includes/configuration/conf.php'); include ($template); ?> In the above the conf.php <?php $te…
Top answer
1 of 1
1

Without being able to test on your system or a duplicate of it, it's difficult for anyone to give a reliable answer. However, given the symptoms you describe, and from just looking at your code, I suspect it is your implementation of the web font (with @import), resource loading, timing and browser display (including possible caching)--assuming the rest of your code (particularly the PHP) isn't the issue.

The First Candidate For Troubleshooting ...

The @import method is a good candidate for troubleshooting the issue--I find it to be slower than linked implementations, generally, and is the first thing I would do away with, to test.

Remove it from your above CSS and use the following code outside of it as separate links, instead.

<!-- webfont -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900" rel="stylesheet">

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<!-- custom css -->
<link rel="stylesheet" href="../assets/css/mainStyle.css">

Note: This may be faster, but is still blocking, in terms of loading. Further down, in this answer, I'll include a link to an article explaining an alternative method.

IMPORTANT: Don't forget to add to your custom css:

font-family: 'Poppins', sans-serif;

You can remove the '&display=swap' part from the end of the font link if you like, or change the method implemented for the font-display property. There are 5 options for the font-display property you can use.

The methods available are:

  • auto
  • block
  • swap
  • fallback
  • optional

A good article that helps explain use of the font-display property in conjunction with Google Fonts can be found here:

https://www.sitepoint.com/how-to-use-google-fonts/

The 'swap' method will load the browser's default font immediately and then load Poppins when a user's browser has fully loaded it. If you prefer, you can use '&display=fallback' instead, like so:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=fallback" rel="stylesheet">

Another Way To Speed CSS Loading ...

One method some pursue when chasing faster load times is to use a combination of LINK tags with:

rel="preload"

Note that this begins asynchronous loading but DOES NOT read the CSS--you have to use a second LINK tag to the same resource, declare and change media types, or use an other method to trigger the browser read of the contents. It's important if you use that method, that you're familiar with all the issues around it. See the article here, for a good explanation:

https://dev.to/masakudamatsu/loading-google-fonts-and-any-other-web-fonts-as-fast-as-possible-in-early-2021-4f5o

Other Speed And Optimization Considerations ...

Now, issues to keep in mind and that might help optimize your load times, the number of font variations included, the browser a user happens to be loading the page in, and where the resource is loaded from.

Among the other considerations that will help reduce load times (which may or may not be part of the cause of inconsistent CSS loading), you might consider downloading the Google Font of your choice (Poppins, in this case) and serving it from:

  • The same server your HTML/content is being served from, as any other asset (yoursite.com/path/to/your/font).
  • Same server, from a subdomain (like static.yoursite.com).
  • From a separate server, regardless of domain/subdomain status (like: cdn.anothersite.com), often faster than Google's servers which are under heavy use--particularly if it's a server you have configured, tuned, and is in the same datacenter and/or on the same subclass C network as your website.

Now, are you actually using 9 font weights/variations of your chosen font on a given page, and/or on every page?

If you're only using 4 font-weights on most pages and you only have a few pages or some specific section of your site/app that uses all 9 fonts, then you can speed up loading and rendering by doing something like this for most pages:

<!-- webfont -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600;800&display=swap" rel="stylesheet">

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<!-- custom css -->
<link rel="stylesheet" href="../assets/css/mainStyle.css">

And, on the pages that make use of all 9 font variations, use the appropriate LINK tag with all nine. You might even experiment with inserting a LINK tag for all 9 font variations before the closing BODY tag on pages that only require 4 and see if it then makes a difference when hitting the pages that use all 9 (for this, allow caching of resources so your tests actually test the benefit/speed gains from using the cache and pre-caching).

Embedding Fonts Can Be An Option ...

You might consider embedding your font in your code, rather than linking to it. This can be a faster loading solution IF USING ONLY A FEW FONT WEIGHTS AND/OR VARIATIONS. The Base64 encoded result for nine font weights and variations (Italic, etc) can get very large, so be aware. There are articles out there on embedding fonts, so it shouldn't be hard to find something on how to do it, but I'll include one that might be helpful, should you be interested in going that route.

https://morganmacarthur.com/css-embed-google-fonts/

As always, be sure to check Google's help--they do have lots of useful documentation.

https://fonts.google.com/knowledge/using_type/using_web_fonts

Test From Multiple Environments ...

Lastly, it is important to consider your webserver, network and load times/speed. Fire up your local PHP built in server on your local system, load the page(s) in question with your Developer Tools open in your browser and be sure to check the appropriate setting so that your browser DOES NOT store items in cache. Then reload it several times, checking the average times for fetching the resources from Google. Fire up a local webserver (XAMP, WAMP, a local install of NGINX, Caddy, Apache, whatever...I use Linux Containers on my Ubuntu Linux laptop) on your machine or LAN, and do the same.

Compare average load times against what you see when checking the same way with your app deployed on your Production/Live server. If your Production/Live server is returning slower times than your Local/LAN testing environment in fetching un-cached resources from Google's servers, you may need to consider new platform or hosting provider. Just test every manner of implementing your CSS locally and on your Production/Live server. Fire up a small VPS or container with another provider to compare things against.

Keep in mind you're linking to Google's servers and so are a great many sites/apps online. You can optimize linking and caching of resources (and subsequent page loads should be faster because of caching), but users can and often do have quirky preferences. Some people disable browser caching on laptops/desktops to ensure they're always fetching the latest data. Mobile users generally don't do this, because, data costs... But there's a lot to give consideration to.

To recap, general principles I like to make use of to speed up font/css loading and avoid timing/rendering/performance issues are:

  • Link fonts, rather than use @import in CSS files
  • Host/serve fonts locally if practical
  • User fewer font variations
  • Encode as Base64 and embed if it offers performance improvement in a given use case

It's possible the @import isn't the primary, or even largest concern, in your case, but I hope all of this helps. Just remember to test and validate. Good luck.

🌐
Sololearn
sololearn.com › en › Discuss › 878156 › xampp-doesnt-load-edited-css-file
Xampp doesn't load edited css file. | Sololearn: Learn to code for FREE!
I am trying to build a website on my local server xampp. at first it works fine but now it doesn't load edited stylesheet. I have refreshed the localhost webpage in the browser, the design changes do not seem to have been applied. ... no thats not working. instead of that i found this and its working. <link href="style.css?v=<?php echo time(); ?>" rel="stylesheet" type="text/css" /> thanks for help Niush sitaula ... no style, importing is not wrong.
🌐
Stack Overflow
stackoverflow.com › questions › 23373607 › css-doesnt-work-if-i-include-the-html-from-a-php
CSS doesn't work if I include the HTML from a PHP - Stack Overflow
The CSS doesn't work because your PHP script is in another directory from what the HTML you're including is. By doing so, the stylesheet your including in the HTML file does not have the correct paths.
🌐
Reddit
reddit.com › r/phphelp › localhost not showing style.css
r/PHPhelp on Reddit: Localhost not showing style.css
May 27, 2021 -

Hello guys I made a project for uni and The problem I just can’t solve is that whenever I open an html or a php file from localhost The style.css never displays... howevee if I doubleclick the .html file it pops up in the browser with the style.css design! What can I do to solve this problem? Thanks!