Why is CSS not changing my updates in localhost and VScode (I got the most Decent answer already)

HTML & CSS
1

Here is my <head> code for CSS

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" type="text/css" href="http://localhost/jwcodeme/style/main-style.css" />

I have tried

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" type="text/css" href=/jwcodeme/style/main-style.css" />

but it just shows the previous version and I have even related restarted Localhost restarted my browser restarted VScode and rebooted my PC and I have saved all my work twice and even triple times. But it still has not updated my HTML page!

If it is a directory tree problem here are the paths.

-assets

  • Ban_1_bg.jpg
  • Logo.png

-javascript

  • main-script.js

-pages

  • contact.html
  • index.html

-style

  • main-style.css

-README.txt

2

Try putting ?1 on the end of the URL in the link.

Standard guess is that your browser is caching the file.

1 Like
3

Nope it still does not work

4

and you’re 100% sure you’re editing the right file?

5

yes I am very sure and I do not like reinstalling the XAMPP cause it always takes a long time

6

if you put that into your browser, go there, hold control, push F5, do you see the old file or the new one?

7

YOU ARE A LIFE SAVER It displayed the new one but do I have to do it for every single save I make in VScode? :grinning: :smiley: :smile: :grin: :laughing: :rofl: :innocent: :innocent: :innocent: :innocent: :innocent: :innocent:

8

What browser are you using? (Version doesnt really matter, just what program. Chrome, Firefox, Edge?)

9

I mainly use chrome and use chrome for my coding but once in a while I use Firefox and I have Safari but in Safari the Display goes Cuco Haywire.

Safari Display

image
image1600Ă—862 204 KB

10

Chrome and Chrome-likes (coughEdgeTrynaHideThatTheyreAChromiumBrowsercough):

Right click somewhere on your page. Inspect something. Anything. It’ll pop open the Dev Tools.
(Sub-tip: If you havent popped the Dev Tools out into a separate window, I highly recommend it.)
Go to the Network Tab.
Check the box marked “Disable Cache”.
Keep Dev Tools Open.
Make and save a change.
Refresh your browser.
image

11

How can I make it so it disables cache when Dev Tools is NOT open so I don’t take much time my PC is kind of slow so the Dev Tools takes some time to open? Also how do I save the change?

12

I mean, the only other way really is going to be to have tabs open for each file you make a change to, and do the Ctrl-F5 thing to it every time you make a change to that file before reloading the actual HTML.

You could have the server send a no-cache header, but i wouldn’t recommend that.
Having the DevTools left open shouldnt be very bad on your computer, unless you’ve got a lot of javascript reloading things on a regular basis.

13

would you count this as a lot?

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('#scroll').fadeIn();
        } else {
            $('#scroll').fadeOut();
        }
    });
    $('#scroll').click(function() {
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

$("img").on("contextmenu", function(e) {
    return false;
});

$("img").mousedown(function(e) {
    e.preventDefault()
});

function updatemenu() {
    if (document.getElementById('responsive-menu').checked == true) {
        document.getElementById('menu').style.borderBottomRightRadius = '0';
        document.getElementById('menu').style.borderBottomLeftRadius = '0';
    } else {
        document.getElementById('menu').style.borderRadius = '5px';
    }
}
14

No, that’s not loading anything… it shouldnt cause any undue load in DevTools.
(If you want to see what I mean, open DevTools on THIS site, and look at the Network tab. Give it a second or two, try typing something… THAT’s what i mean by a lot.)

3 Likes
15

In Chrome click and hold the reload icon( the circle with arrowhead under the system buttons) that brings up am options list, so select Hard reset. Chrome had a setting to do a hard reset when the debug pane was open but it was hard to find and disappeared in an update.

16

This still only works if the DevTools are open, but it’s worth a mention, yes.

17

I am holding the reload button but nothing happens

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.