CSS Changes Are Not Getting Reflected. Why

CSS changes are not getting reflected. Why?

I forgot to close a { in the CSS file.
That's why all the code didn't show up on the page.

CSS file not refreshing in browser

Try opening the style sheet itself (by entering its address into the browser's address bar) and pressing F5. If it still doesn't refresh, your problem lies elsewhere.

If you update a style sheet and want to make sure it gets refreshed in every visitor's cache, a very popular method to do that is to add a version number as a GET parameter. That way, the style sheet gets refreshed when necessary, but not more often than that.

<link rel="stylesheet" type="text/css" href="styles.css?version=51">

css changes doesnt reflect on my project on localhost

Sometimes web browser may keep old version in cache and you may need turn off cache in web browser, or clear it, or try Ctrl+F5 to reload without using cache.

Or you can add random argument with ? to url - ie, /static/main.css?2020.08.11.08:45 and web browser will treat it as new url so it will read it from server.

In DevTool in Firefox/Chrome in tab Network you can check if it has no problem to load this file. It should show also if it was readed from cache.

CSS changes are not reflected even after changing version, hard refresh and clearing cache

is it a PWA (progressive web app)... ? in which case the data is served by service worker and not freshly fetched.

Go to

• Chrome developer tools (press F12)...
• Click on Application tab on
• the left navigation, click on "Service workers" and 'unregister"
  service workers...
• going on the next option in the left navigation, click on "Clear storage"...
• click on the "Clear site data" button on the right zone restart Chrome and check with Ctrl+shift+R

if you're using a CDN, you may have to purge the cache for this particular CSS file from there as well.

Why my css changes are not getting reflected?

your border syntax is wrong, because you are not setting a border-style.

the formal syntax is this one:

<br-width> || <br-style> || <color>

Here are the values:

<br-width>

Default value medium is used if absent. See border-width.

<br-style>

Default value none is used if absent. See border-style.

<color>

A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text
color, not the background color). See border-color.

---

.div1 {  max-width: 50%;  border: 1px solid;  /*background-color : "red";*/}.div2 {  max-width: 50%;  /*background-color : "blue";*/}.div3 {  max-width: 50%;  /*background-color :"green";*/}

<div class="div1">p</div><div class="div2">q</div><div class="div3">r</div>

My website doesnt react to changes in my css file

CSS rules are often stored in your cache, which will only update periodically. To ensure you are loading the latest CSS rules do a hard refresh of your page by using Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac) on your browser.

---

Related Topics