CODEWITHSUNDEEP
htmlcss
ForestProgramming
ForestProgramming

Reputation: 83

CSS file not updating in browser

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.

Upvotes: 0

Views: 1956

Answers (4)

chris c
chris c

Reputation: 331

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%; 
}

Upvotes: 0

imvain2
imvain2

Reputation: 15847

@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.

Upvotes: 0

ShaH
ShaH

Reputation: 170

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

Upvotes: 0

Istv&#225;n
Istv&#225;n

Reputation: 21

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

Upvotes: 1

Related Questions