Question posted in 
My custom external CSS suddenly stop working and I do not know why, but when I try to copy the css code to another newly created file, it works but later on, it will not. Why does this happen? I am using Bootstrap as my CSS framework. And does using php affect this?
UPDATE:
So actually, the css loads slow in my php file. Does the live server affects tha load speed of the external css?
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
:root {
--primary: rgb(42, 157, 143);
--secondary: rgb(38, 70, 83);
--secondary-hover: rgba(38, 70, 83, 0.3);
--warning: rgb(233, 196, 106);
--danger: rgb(231, 111, 81);
--active: var(--secondary);
}
html, body {
height: 100vh;
min-height: 100vh;
}
a {
display: block;
}
.bg-image {
background-image: url('../images/students.jpg');
background-size: cover;
background-repeat: no-repeat;
}
/** sidebar start */
.sidebar {
max-width: 13.5rem;
min-width: 14rem;
background-color: var(--primary);
color: white;
}
.sidebar-item {
margin-bottom: 5px;
}
.sidebar-item .active-link {
background-color: var(--active);
}
.sidebar-link {
color: white;
cursor: pointer;
transition: all .35s;
}
.sidebar-link:hover {
background-color: var(--secondary-hover);
}
.notification-btn, .profile {
cursor: pointer;
user-select: none;
border: none;
}
.profile-btn {
position: relative;
border: none;
}
.profile {
width: 40px;
height: 40px;
border-radius: 100%;
/*! remove, only proto */
display: grid;
place-content: center;
background-color: rgb(90, 20, 20);
color: white;
}
.chevron-btn {
font-size: 13px;
display: grid;
place-content: center;
background-color: gray;
width: 20px;
height: 20px;
border-radius: 100%;
position: absolute;
right: -2px;
bottom: -2px;
transform: translate(2px, 2px);
}
/** sidebar end */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- 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">
</head>
<body>
<div class="container-fluid p-0 h-100">
<div class="row h-100 p-0 m-0">
<!-- sidebar -->
<div class="sidebar col border-end py-2 p-0 h-100">
<p class="fs-3 fw-bolder text-center">XYZ LMS</p>
<ul class="list-unstyled px-2">
<li class="sidebar-item">
<a href="" class="sidebar-link rounded-1 link-underline link-underline-opacity-0 py-2 px-3 active-link">
<i class="bi bi-speedometer2 me-2"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item">
<a href="" class="sidebar-link rounded-1 link-underline link-underline-opacity-0 py-2 px-3">
<i class="bi bi-bookmark me-2"></i>
<span>Courses</span>
</a>
</li>
<li class="sidebar-item">
<a href="" class="sidebar-link rounded-1 link-underline link-underline-opacity-0 py-2 px-3">
<i class="bi bi-person-check me-2"></i>
<span>Students</span>
</a>
</li>
<li class="sidebar-item">
<a href="" class="sidebar-link rounded-1 link-underline link-underline-opacity-0 py-2 px-3">
<i class="bi bi-person me-2"></i>
<span>Profile</span>
</a>
</li>
</ul>
</div>
<!-- content side -->
<div class="col flex-grow-1 h-100 p-0">
<!-- navbar -->
<nav class="d-flex justify-content-between align-items-center px-4 py-2 shadow-sm">
<div>
<span class="fs-5 fw-bold">Dashboard</span>
</div>
<div class="d-flex align-items-center">
<!-- notification -->
<div class="notification">
<button class="notification-btn me-4 ">
<i class="bi bi-bell-fill fs-5"></i>
<span class="badge bg-danger">0</span>
</button>
</div>
<!-- profile -->
<div class="dropdown">
<button type="button" class="profile-btn profile" data-bs-toggle="dropdown">
<div>S</div>
<div class="chevron-btn">
<i class="bi bi-chevron-down text-white"></i>
</div>
</button>
<ul class="dropdown-menu">
<li><a href="#profile" class="dropdown-item">Profile</a></li>
<li><a href="#logout" class="dropdown-item">Logout</a></li>
</ul>
</div>
</div>
</nav>
<!-- main content -->
<div class="content p-3">
This is the dashboard
</div>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- popper js -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
<!-- custom -->
<script src="../assets/js/script.js"></script>
</body>
</html>
I have tried transferring the code to another file but will unexpectedly stop working.
2
Answers
The issue you’re experiencing with your custom external CSS not being consistently applied might be due to a few potential factors:
Caching Issues: Web browsers cache CSS files to improve loading times. When you update your CSS file, the browser might still be using the cached version. Try clearing your browser cache or use a hard reload (Ctrl+F5 on most browsers) to see if this resolves the issue.
Path Issues: Ensure the path to your CSS file is correct. Sometimes, moving between environments (like development and production) can change the relative path.
Order of Stylesheets: Since you’re using Bootstrap, ensure that your custom CSS is loaded after the Bootstrap CSS in your HTML. This ensures your custom styles have precedence over Bootstrap’s styles.
Specificity in CSS: Ensure your custom CSS selectors have higher specificity than the Bootstrap selectors. Sometimes, Bootstrap styles might override your custom styles due to having more specific selectors.
PHP Server Response: If you’re using a PHP server, check that no server-side issues are causing the delay in serving the CSS file. PHP itself should not affect CSS loading unless there’s an issue with how the server handles static files.
File Permissions: Verify the file permissions of your CSS file. Incorrect permissions might prevent the browser from loading the file.
Syntax Errors in CSS: A syntax error in the CSS file can cause parts of the CSS not to be applied. Validate your CSS using a tool like the W3C CSS Validation Service.
Network Issues: If the CSS file is large or the network is slow, this could delay the loading of the CSS. Use browser developer tools to check the network loading times.
Regarding the update about slow loading in the PHP file, the server configuration or network issues may be affecting the loading speed. Live server environments can vary in performance, so if the CSS loads fine in a local environment but is slow on a live server, it might be worth checking the server configuration and network conditions.
Also, consider optimizing your CSS file by minifying it and checking for any unnecessary large imports or media that may be slowing down its loading time.
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.
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:
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:
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:
Another Way To Speed CSS Loading …
One method some pursue when chasing faster load times is to use a combination of LINK tags with:
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:
Lastly, 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:
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:
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.