2

I am not new to html or css, however I am using bootstrap 4 for the first time, if that makes a difference in the end.

I had added so far only a background color to the .container on my own style sheet and that went fine. That was literally all I added.

After spending all day yesterday putting together the basic structure of the page, I added a border to one element in my css file and nothing happened. I spent the rest of the day today up until now trying to figure out what I did wrong. Here is what I tried: cleared cache (didn't know if it makes a difference, I am working totally local right now except the bootstrap sheets are connected through the CDN), I refreshed the page, tried ctl+f5, restarted the browser, I validated both html and my css file and had only a warning that my article element lacked a header... and I did a heck of a lot of googling.

Nothing changed. I removed the entire call to my style sheet, that made a difference, the background color disappeared... as I expected. I reconnected the style sheet, removed the background color, and refreshed the page. The background color showed up, and still no border. Finally I cleared the entire css file, nothing left in it, disconnected and reconnected the style sheet (reloading the page in between), reloaded the page again, and the background color came back. Where is it coming from if my css file is even completely empty? I added different styles but the same background color was persistent.

Finally I completely deleted the actual css file from my hard drive, reloaded the page to make sure it wasn't going to STILL be there. Thankfully I got the error connecting to css style sheet. I made a new empty style sheet, reconnected, and everything seems to work fine. All the styles I put in now work fine (so far...).

Any idea what that was about and how I can prevent this from happening again?

Matt
  • 403
  • 1
  • 4
  • 6
  • Fortunately, you were able to solve the issue by yourself, but my advice is that you should never, and I mean never modify the bootstrap stylesheet even if you get tempted this can cost you your entire project and time. – Tebogo Khanye Nov 02 '17 at 21:45
  • cache? Change the stylesheet name, eg. adding a parameter... `styles.css?1` – pavel Nov 02 '17 at 21:45
  • @BruceWayne I did not modify the bootstrap stylesheet at all, and even as I mentioned I connected to it through the CDN, I do not have the bootstrap style sheet on my computer at all. – Matt Nov 02 '17 at 21:53
  • In that case, as pather mentioned, the stylesheet certainly was cached. – Tebogo Khanye Nov 02 '17 at 21:57
  • any inline styles in html? – Hareesh Nov 02 '17 at 22:12
  • @Hareesh no, I prefer to keep complete separation between html and css documents except to occasionally make quick tests. – Matt Nov 02 '17 at 22:16
  • did you check in different browser? – Hareesh Nov 02 '17 at 22:17
  • @Hareesh no I did not as I didn't realize that clearing the cache didn't necessarily clear the cached stylesheet as Obsidian Age mentioned in the answer below. I didn't think the issue was with browser since clearing the cache hadn't changed anything. – Matt Nov 02 '17 at 22:31

2 Answers2

4

This definitely sounds like a caching issue, and it's probably with the CSS cache.

Note that the CSS cache doesn't get cleared with a standard hard-refresh of CTRL + F5; this reloads the page, but keeps cached content. To forcibly clear your CSS cache as well, try any of the following:

  • CTRL + SHIFT+ R
  • SHIFT + F5
  • Holding SHIFT while clicking on the refresh icon

You can also resolve this by manually making your page think that it is loading a different CSS file. This can be done with the obvious file rename, but can also be done by simply appending a query string to the end of it (such as style.css?v=1).

This allows you to dynamically append the current timestamp to your CSS file via a back-end language, thus forcing your browser to reload the CSS file every time you page loads, if you so desire. Note that this will fix update issues, but will result in a slight performance hit.

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • I did not realize that there was a separate css cache. But wouldn't that be cleared when I clear the browser cache as well? Maybe I do not totally understanding caching. Also, does this affect also my local website? It is not a live website and resides totally in my documents file under the project name. – Matt Nov 02 '17 at 21:56
  • Local CSS (and images) will still get cached. They'll end up as duplicates in your `Content.IE5` folder. And clearing the browser cache does not *necessarily* clear the CSS cache; it depends on the browser. In most cases, you'll need to do clear the CSS cache as well. Just one more shortcut combo to add to your 'try this to fix a bug' list :) – Obsidian Age Nov 02 '17 at 21:59
0

This is a Cache issue. You need to clear your cache on your browser.

Use ctrl+shift+r

Thanuja pavani satti
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 27 '23 at 12:50