CSS changes are not getting reflected. Why?

Question

I am working on my website and whenever I am adding some new lines to my CSS file, it just doesn't want to use the lines I made.

Yet, they should be alright.

.what-new {
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3 {
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;

Just as an example.

The CSS file is working at one part, but from somewhere it just stops using my file. Yet, it is linked in the < head >.

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

And my HTML code is the following(note that this is just a part of the code):

    <div class="what-new">
    <div class="container">
        <h3>What's new</h3>
        <div class="blog-news">
            <div class="blog-news-grid">
                <div class="news-grid-left">
                    <h4>06</h4>
                    <small>of january 2015</small>
    </div>

Anyone know a solution for that?

Check whether the absolute path of the link : style/css_2-play.css loads the css with your changes in the browser. If it does not , then your path is wrong . — The Dark Knight, Jan 30 '15 at 12:18
Well, some of the .css code is actually working. Just new lines are not reflecting on the index. I will check the path again. Edit: Path is ok too.. :c — Kian Pasani, Jan 30 '15 at 12:25
When open the css file using the relative path, do you see the css code changes that you had made reflected in the file ? — The Dark Knight, Jan 30 '15 at 12:29
Make sure the file you are editing is the same one that you are referencing. I know I've accidentally saved the file I'm working on in a different place and thus been updating the "wrong" file. If you are testing on the web try clearing your cache (hold down Shift and refresh). — SRing, Jan 30 '15 at 12:30
Maybe you have other styles that have a higher specificity over the ones mentioned above [see here](http://css-tricks.com/specifics-on-css-specificity/) — Xareyo, Jan 30 '15 at 12:31
@TheDarkKnight Yes it does save the changes even if I open the file via the reltaive path. — Kian Pasani, Jan 30 '15 at 12:33
@SRing Yes, it is the exact same file. Clearing the cache didn't work either. — Kian Pasani, Jan 30 '15 at 12:34
Then the next step for you will be to determine whether the server on which you are deploying the file is really publishing it . BTW , are you using any web or app server ? — The Dark Knight, Jan 30 '15 at 12:34
@Xareyo Thanks, I will check this! Maybe it will help me out! — Kian Pasani, Jan 30 '15 at 12:36
@TheDarkKnight For now it is just saved on my local PC. It will be uploaded on a server once the website is finished. — Kian Pasani, Jan 30 '15 at 12:37
I think as Jenti Dabhi pointed out , you have to close the 2nd div . You have not done so . — The Dark Knight, Jan 30 '15 at 12:41
When you are looking at the page that isn't reflecting the updates open up your html inspector (Ctrl + Shift + C) and look at the specific element that should have been updated. Over on the left it should tell you which of your css lines are being overwritten (it will have a line through it). If you don't see the change you made then it is either the path or your stack not refreshing. If you do see the changes you've made but they have a line through them double check your css (they are being overwritten). — SRing, Jan 30 '15 at 12:44
The lines are there, but they are just not being reflected on the page! As Xareyo pointed out, it may be a overflow of CSS-lines which are blocking each other. — Kian Pasani, Jan 30 '15 at 12:49
Nope, unfortunaley not. I am still trying to fix this with the tips you guys gave me. I will keep you up to date, atm I am trying that !important thing in the css-file. — Kian Pasani, Feb 06 '15 at 08:02

Andrea Ligios · Answer 1 · 2019-12-19T14:04:57.007

This means that your CSS rule is not applied or that your CSS file is cached.

The possible causes are:

a CSS rule with a higher Specificity is winning over the rule you expect to be applied

a CSS rule with the same Specificity is loaded after your
(the order of declaration counts - the latter wins - so check your CSS file imports)

a CSS rule targeting your object uses the !important keyword.

Inspect how the rules are applied through the browser's Developer Tools (open with F12).

HINT: In the CSS panel, the rules are listed by importance in descending order.

your CSS has syntax errors

your HTML is not well-formed

Use some validator.

your browser is caching the CSS file

Force the refresh of the browser-cached resource by pressing CTRLF5.

HINT: This Q&A explores the subject.

your server is caching the CSS file

Force the refresh of the server-cached resource by entering the URL of the static resources in the Address Bar and pressing CTRLF5 on that page (that is the CSS file).

HINT: To open the CSS file's URL fastly, use Open link in a new Tab from the browser's Developer Tools, or click on the CSS link in the HTML opened with View Source.

The `ctrl + F5` worked. Though by reverting my **chrome cache settings** (`chrome://flags/`) to its default value I was able to get it show changes just by a simple refresh. And thank you so much I was doing `compass watch` and seeing my `scss` getting modified in the terminal, yet it wasn't getting reflected, because the css was getting cached... — mfaani, Aug 03 '18 at 21:09

score 15 · Answer 2 · answered Jan 30 '15 at 13:04

You are basically facing a caching issue where your browser doesn't feel like actually requesting the new version from the server and instead uses the one cached in the internal browser cache.

Simply using Developer tools to disable cache will work during development but if your workflow is based on putting stuff online frequently you will eventually face a situation where you are not anymore in control which version of your CSS code your visitors see (and you can't count on them using their Developer tools to disable caching).

In order to prevent stuff like this from happening you should use a technique called "cache busting" which essentially means you will be appending stuff to your resource URLs that will change every time your resource files change. Essentially your CSS URL transform from this

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

to something like this

<link rel="stylesheet" href="style/css_2-play.css?1422585377" type="text/css"/>

There is a lot of coverage about cache busting on SO so you might want to take a look at all available options before deciding how you want to handle the issue.

My personal favorite technique is combining server-side code with mod_rewrite to achieve cache busting. The workflow is as follows.

1) Server side code uses DOMDocument to look up for all resource files in the generated HTML code like CSS, JavaScript etc. and appends a modified timestamp retrieved with filemtime.

Example: /css/main.min.css becomes /css/main.min-1422585377.css in the code that will be served back to the client (browser).

2) When the browser receives the response it will simply have to treat that CSS request as a new resource if the appended timestamp doesn't match the one in the cache (resource with a different name is always treated as a new request).

3) Browser now send a request for /css/main.min-1422585377.css to the server.

4) In order to redirect all requests to the one and only main.min.css that actually exists on the server we use a simple rewrite rule like this

RewriteRule (.+)-(\d{10,}).(css|js|jpg|jpeg|png|gif)$ $1.$3 [L]

NOTE: I actually prefer to include timestamps in the filename itself so instead of /css/main.min.css?1422585377 I prefer to use /css/main-1422585377.min.css because some proxy servers like Squid tend to ignore query strings and will treat only the filename part as relevant.

Adding ?1 then ?2 and so on works as you make changes after /css/main.min.css this is working fantastically for me — DragonFire, Apr 03 '21 at 23:58
Good answer, thanks for the comment @DragonFire, it's so easy, just adding `?1`, `?2`, `?3` after the .css — Gass, Jun 17 '21 at 09:36

score 8 · Answer 3 · answered Jan 30 '15 at 12:35

This happens to me all the time when I work on my website on my XAMPP stack on my mac. The solution there is to activate the developer options, and to select "empty cache" from the developers menu. This forces the browser to refresh the css for the page. I am not familiar with developing on other platforms, but see if you can empty the cache in your browser.

Also, check your css and make sure that your syntax is correct, in particular that you have not omitted a "}" somewhere.

score 6 · Answer 4 · answered Jan 30 '15 at 12:36

6

Please close the div you start .what-new h3

CSS CODE:

.what-new{
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3{
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;
}

answered Jan 30 '15 at 12:36

Jenti Dabhi

870
5
11

1

It is closed in my code, my bad that I didn't posted it. Sorry! – Kian Pasani Jan 30 '15 at 12:41

score 5 · Answer 5 · answered Jun 16 '17 at 06:41

If your browser is not reflecting the changes made in the CSS stylesheets attached, then try the following :

Right click on your document in the browser window.
Go to View Page Source.
In your code find the link to your attached CSS file. Go to your attached CSS file and see whether it contains your latest changes. If not refresh your CSS file and all the latest changes will appear.
Reload your document and the changes will appear. Open the CSS file in your browser.Reload your CSS file in your browser. Hope this helps!!

score 3 · Answer 6 · answered Feb 13 '20 at 10:35

3

You can disable cache in development mode. For example, for Google Chrome: right click-> inspect->Network-> click on Disable Cache Then, you don't need to clean cache every single time.

answered Feb 13 '20 at 10:35

LiXiang

31
2

T.T · Answer 7 · 2016-08-25T06:27:56.787

2

For Django, 'clearsessions', followed by 'runserver' will refresh all the setting in .css file.

You should also clean the cache of your browser.

edited Aug 25 '16 at 06:27

answered Aug 02 '16 at 08:31

T.T

1,011
1
7
6

score 1 · Answer 8 · answered Oct 03 '17 at 03:46

1

After suffering a lot and having done all the forms already mentioned here.

I found on my CPanel a application called Cachewall, I just turn it off, and this solve my problem

This may help someone

answered Oct 03 '17 at 03:46

Daniel Beltrami

756
9
22

score 0 · Answer 9 · answered Jul 10 '17 at 18:34

0

Mainly its due to caching by your browser. Either delete cache by going to delete history and deleting caches or as suggested above just press ctrl+f5 instead of just f5

answered Jul 10 '17 at 18:34

Dhruv Aggarwal

43
7

score 0 · Answer 10 · answered Jan 19 '18 at 13:17

0

In my case the mistake was, that I did not have installed package in VS2017 with name Bundler & Minifier. After installation, all changes to eg. main.css changed automatically also main.min.css and Web publishing took actual CSS file.

answered Jan 19 '18 at 13:17

Honza P.

1,165
1
11
12

score 0 · Answer 11 · answered Feb 15 '19 at 19:22

I am facing the same problem but I found a solution. after adding or changing the css properties in css_2-play.css

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

change the CSS file name into something.css

<link rel="stylesheet" href="style/something.css" type="text/css"/>

don't forget to rename the css file in the orignal DIRECTORY.

score -2 · Accepted Answer · edited Apr 07 '16 at 02:48

-2

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

edited Apr 07 '16 at 02:48

Pang

9,564
146
81
122

answered Feb 06 '15 at 08:16

Kian Pasani

343
1
3
8

5

Someone above already suggested this. You should select theirs as correct instead of your own. – gwalshington Mar 15 '18 at 18:45

gadolf · Answer 13 · 2020-04-11T19:11:00.717

-3

For Chrome use Clear Cache Extension. For download this extension click this link.

edited Apr 11 '20 at 19:11

answered Dec 26 '19 at 19:21

gadolf

1,035
11
19

CSS changes are not getting reflected. Why?

13 Answers13

Linked

Related