CSS style not updating in web browser

Question

I have recently updated a CSS file onto the web with a slight change in, to make a certain text blue instead of red:

p.melding{
    font-weight: bold;
    color: blue; /*red earlier*/
}

The file has been updated online, but the change is not displaying online (nor any other changes I have made to the CSS script). When I look in the style editor in the web developer tool in Firefox, it says red. (When I change it in that editor it changes to blue.)

The style sheet seems to work in general, so shouldn't be an issue with the code there. Below are the relevant parts of my html/php file. Although this has been written by someone else (professional) and there has not been a problem with it earlier, so I think the problem lies somewhere else.

The link to the stylesheet:

  <head>
    <title>...</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="stil.css" type="text/css" media="screen" />
  </head>

and the php code concerning the class in question:

<?php
  if (isset($melding)) {
    echo "            <p class=\"melding\">$melding</p>\n";
  }
?>

Any ideas why the changes to my CSS file are not showing online?

assuming you have a `
` tag holding the "melding" class(?) Show us the rest of your code. You tagged as PHP/HTML but nothing to support the question really. — Funk Forty Niner, Sep 14 '15 at 13:21
You must to show the HTML and the CSS code that is applying to the element, but all the css, not only this part. — Marcos Pérez Gude, Sep 14 '15 at 13:22
Don't let PHP confuse you. It's a PREprocessor. It does all it's jobs on the server, and sends out a pure text/html (or whatever you tell it to `echo`). Check if your path is correct, check if your class is correct, also try to change the filename in `link` tag to something like `stil.css?v2` (so that the browser won't use the CSS file that's in its cache). — ROAL, Sep 14 '15 at 13:24
that... or a hard refresh. FF for one, is bad for that, if you're using FF. — Funk Forty Niner, Sep 14 '15 at 13:25
you can see inherited from class in your browser firebug styles — Mohammad Fanni, Sep 14 '15 at 13:25
@todinov Even better `` ;-) otherwise OP would need to use `href="stil.css?v=2"` (3,4,5) etc. if further changes are made. — Funk Forty Niner, Sep 14 '15 at 13:49
@Fred-ii- using the current time would be okay for development, but in production would cause the stylesheet to be downloaded on every visit. — hungerstar, Sep 14 '15 at 14:05
@Fred-ii- Personally I'm not sure this is a good idea as every time a user views the page the revision time (`.css?`) will change. — Aaron, Sep 14 '15 at 14:06
See this: https://stackoverflow.com/questions/460389/browser-caching-of-css-files — BryanH, Sep 14 '15 at 19:52
`Ctrl`+`F5` did the trick! Didn't know about that quick fix, thanks a lot! I guess it was a caching issue. — Ingrid, Sep 15 '15 at 07:28

score 0 · Answer 1 · edited Sep 14 '15 at 13:35

0

Try this, I hope that it works for you:

p.melding{
   font-weight: bold !important;
   color: blue !important; 
}

It usually happens, if your CSS is getting overridden again, maybe by some other file.

A couple notes about using !important.

Hope it helps you out!!

edited Sep 14 '15 at 13:35

hungerstar

21,206
6
50
59

answered Sep 14 '15 at 13:28

Amit Horakeri

747
5
18

He has said it shows as red when he inspects the element. – rybo111 Sep 14 '15 at 13:29
Thats rite, but it also happens, if the css is getting overridden in someother file. As CSS follows a top-down approach. The later css is the one that is captured and applied. – Amit Horakeri Sep 14 '15 at 13:30
You can read more about the !important here. http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/ – Amit Horakeri Sep 14 '15 at 13:33
Yes, CSS can be overridden. But in this case if you inspect the element (at least in Chrome), the prioritised rule is what's shown first - therefore adding `!important` won't do anything. His changes are not being shown. It's more likely to be a cached CSS issue. – rybo111 Sep 14 '15 at 13:38

score 0 · Accepted Answer · answered Sep 15 '15 at 13:23

0

The problem was that the page had not been cached. Doing Ctrl+F5 (in the web browser) solved it.

The caching depends on the browser and the server, so it varies if this is an issue or not when updating CSS files.

answered Sep 15 '15 at 13:23

Ingrid

516
6
18

score 0 · Answer 3 · answered Sep 15 '15 at 13:27

0

Try using the following

<?php
  if (isset($melding)) {
  echo "            <p class='melding'>$melding</p>\n";
  }
?>

If that does not work clear the browser cache and restart the browser.

answered Sep 15 '15 at 13:27

Ronald P Mathews

2,178
1
22
26

CSS style not updating in web browser

3 Answers3