CSS file not updating in browser

Question

Just working on basic coding skills and when I make changes in the css file the changes do not show up on non of my browsers.

Here is my index.html code:

<html>
   <head>
       <link ref="stylesheet" href="css/style.css?v=1.1">
   </head>

<body>
   <div class="ios-switch">
    <div class="switch-body"> 
        <div class="toggle"></div>
    </div>
    <label>iOS Switch Practice</label> 
    <input type="checkbox" name="check box">
</div>
    </body>
</html>

Here is my style.css file:

*
{
   margin:0;
   padding:0;
}

.ios-switch{`enter code here`
    display: flex; 
    flex-direction: row; 
    align-items: center;
    margin: 10px 0; 
}

.ios-switch .switch-body{
    background-color: lightgray;
    border: solid 1px gray; 
    width: 96px;
    border-radius: 999px; 
}


.ios-switch .switch-body .toggle{
    width:48px; 
    height:48px;
    background-color: white;
    border-radius: 50%; 
}

Lastly, when I looked up this issue online some suggested to go to developer tools in google chrome and I noticed that there was this error message:

VM25:1047 WebSocket connection to 'ws://localhost:8125/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Thank you so much for you time.

Did you clear you cache or do a hard refresh on the page? Ctrl+F5 — abney317, May 02 '19 at 22:20
If it is truly a cache issue, you already have the mechanism in place to bypass it, simply change the value after `v=` in your style query string. However, it looks as if your localhost web server is failing. This is one solution but it will depend on your server software: https://stackoverflow.com/questions/32190881/how-to-solve-err-connection-refused-when-trying-to-connect-to-localhost-running — imvain2, May 02 '19 at 22:27
BTW for straight up HTML/CSS/Javascript you don't need to run local host, you can simply open the HTML file in your browser and as long as all the paths are correct it will work. There are sometimes it doesn't work but that is specific to javascript — imvain2, May 02 '19 at 22:29
The default cache time is 15 minutes. Clear the cache each time OR add a timestamp to CSS. ` — Jakub Muda, May 02 '19 at 22:31
If it is a cache issue, you can disable your cache while you develop (instead of clearing your cache manually). https://www.technipages.com/google-chrome-how-to-completely-disable-cache — jason, May 02 '19 at 23:52
Try viewing the page in "incognito mode" and see what happens. — Christopher Bennett, May 03 '19 at 02:34

score 1 · Answer 1 · answered May 03 '19 at 12:49

1

Go to DeveloperTools (F12) than setting (F1), and at the Network preferences check (Disable cache (while DevTools is open) - Refresh the page

answered May 03 '19 at 12:49

István

21
5

score 0 · Answer 2 · answered May 03 '19 at 12:56

0

You can refresh the page cleaning it's cache by pressing [Ctrl] + [F5] (reload).

answered May 03 '19 at 12:56

ShaH

170
1
9

score 0 · Answer 3 · answered May 03 '19 at 14:34

0

@ForestProgramming, none of the cache solutions are going to fix this because its not related to your cache. For one reason or another your web server is failing. Since you are just using HTML/CSS just open the HTML file in your browser instead of using localhost.

You can do this in the file menu, then open, and find the HTML file and click on it.

answered May 03 '19 at 14:34

imvain2

15,480
1
16
21

I just did that and it still did not work. I just dont understand what the issue is. And I cannot find anything online that can help me with this. When I copy and past my code on codePen for testing and the code works on there. So something is wrong with the browser stuff... – ForestProgramming May 03 '19 at 16:48
@ForestProgramming try opening the HTML in the browser like I mentioned, but before that go into your code and remove the query string from style.css. – imvain2 May 03 '19 at 17:19
Just tried it and it did not work. Whats crazy is that before this project I worked on another project and I can easy upload that and when I make changes in my css file the changes reflect on the browser. But for this project the changes are not reflecting. My code seems to be fine. So i dont know what to do. Also when I check my develop tool I get the error message:VM25:1047 WebSocket connection to 'ws://localhost:8125/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED – ForestProgramming May 03 '19 at 17:31
If you are still getting that error even though you aren't using `localhost` like I'm suggesting, something else is happening. Because I'm suggesting to NOT use localhost but open the file locally in your browser. – imvain2 May 03 '19 at 17:36
Yes I did that by going to chrome and opening my file from there and I am getting the same results. Could something be wrong with my code, possibly? – ForestProgramming May 03 '19 at 17:45
Your code isn't the problem, it is simple code that doesn't reference `localhost` at all. So if you can't even open a HTML file in your browser, you have a different problem. Where is the HTML and CSS files stored in relation to your computer (hard drive, external hard drive, internet etc)? – imvain2 May 03 '19 at 17:47
Hard drive. When I open the html file in the browser I can only see what I coded in my html file such as "iOS switch practice" and the checkbox right next to it which is all I can see which is great because that part is working. But the remaining stuff that I coded in the CSS file do not appear on the browser. – ForestProgramming May 03 '19 at 18:00
When you straight up open the HTML file, what does it say in console/networking for style.css? Does it mention 404, 200 error? – imvain2 May 03 '19 at 18:07
If I am looking at it right, I am not seeing anything related to 404, 200 error – ForestProgramming May 03 '19 at 18:21
And what confuses me the most is that all my other projects upload perfectly fine. But this simple project with simple code lines is not. – ForestProgramming May 03 '19 at 18:25
Sorry, for the error I meant 404 (as missing) 200 (successful loading). Either of those should be in your networking of the developer tools. – imvain2 May 03 '19 at 18:28
Wow. As weird as it sounds, I recoded my html and added some stuff to the code and now its working. So i guess it was my code after all. – ForestProgramming May 03 '19 at 19:52

score 0 · Answer 4 · edited Jan 30 '23 at 21:07

0

You css file looks invalid.

try removing this from it

For CSS validation try using the validator here

*
{
   margin:0;
   padding:0;
}

.ios-switch{
    display: flex; 
    flex-direction: row; 
    align-items: center;
    margin: 10px 0; 
}

.ios-switch .switch-body{
    background-color: lightgray;
    border: solid 1px gray; 
    width: 96px;
    border-radius: 999px; 
}


.ios-switch .switch-body .toggle{
    width:48px; 
    height:48px;
    background-color: white;
    border-radius: 50%; 
}

edited Jan 30 '23 at 21:07

Sven Eberth

3,057
12
24
29

answered May 20 '19 at 06:25

chris c

321
2
14

1

Thank you. However, I figured out the issue. I was using ref instead of rel in the html file . Everything worked once I changed it to Guess we have to be very careful with small details when it comes to programming. – ForestProgramming May 28 '19 at 20:59

CSS file not updating in browser

4 Answers4