Only certain specific changes in css file being reflected in browser

Question

I have the following CSS and HTML code that I am using to develop a web project:

style.css:

body {
    background-color: red;
    font-size: 14px;
    font-family: Roboto,arial,sans-serif
    color: gray;
}

img {
    height: 92px;
    width: 272px;
}

a {
    color: gray;
}

a:visited {
    text-decoration: none;
}

.navbutton,
.footbutton {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.nav-img {
    border-radius: 50%;
    height: 32px;
    width: 32px;
}

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Google</title>
    <link rel="stylesheet" type="text/css" href="style.css?version=8">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar container">
      <a class="navbutton" href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
      <a class="navbutton" href="https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US">Store</a>
      <a class="navbutton" href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
      <a class="navbutton" href="https://www.google.com/imghp?hl=en&authuser=0&ogbl">Images</a>
      <a class="navbutton nav-img" href="https://www.google.com">
        <img src="https://i.stack.imgur.com/34AD2.jpg">
      </a>
    </div>
    <div class="bod">
      <div class="main-img">
        <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google">
      </div>
      <input type="text">
    </div>
    <div class="srch-button">
      <button type="button">Google Search</button>
      <button type="button">I'm Feeling Lucky</button>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>

  <footer>
    <div class="footbutton">
      <a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2m--ahpm-0000000078-0000000001&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1#!/">
        Advertising
      </a>
      <a href="https://smallbusiness.withgoogle.com/?subid=us-en-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=us-en_US-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u">
        Business
      </a>
      <a href="https://www.google.com/search/howsearchworks/?fg=1">
        How Search Works
      </a>
      <a href="https://sustainability.google/commitments/?utm_source=googlehpfooter&utm_medium=housepromos&utm_campaign=bottom-footer&utm_content=">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAMAAAAiV0Z6AAAAPFBMVEVLoEN0wU6CzFKCzFKCzFKCzFKCzFJSo0MSczNDmkCCzFJPoUMTczNdr0gmgziCzFITczMTczMTczMTczPh00jOAAAAFHRSTlPF/+bIsms8Ad///hX+//5/tXw7aMEAx10AAACaSURBVHgBbc4HDoRQCATQ33tbvf9dF9QxaCT9UQaltLHOh/golXKhMs5Xqa0xU1lyoa2fXFyQOsDG38qsLy4TaV+sFislovyhPzLJJrBu6eQOtpW0LjbJkzTuTDLRVNKa3uxJI+VdiRqXSeu6GW+Qxi29eLIi8H7EsYrT42BD+mQtNO5JMjRuC4lSY8V4hsLX0egGijvUSEP9AbylEsOkeCgWAAAAAElFTkSuQmCC"> 
        Carbon Neutral Since 2007
      </a>
      <a href="https://policies.google.com/privacy?hl=en&fg=1">
        Privacy
      </a>
      <a href="https://policies.google.com/terms?hl=en&fg=1">
        Terms
      </a>
      <a href="https://www.google.com/">
        Settings
      </a>

  </footer>
</html>

For some reason, whenever I make a change to the css file, the only changes that I can see reflected in the browser (Chrome) are any changes I make to the img dimensions in the img selector (ex: I will see a change in browser if I change the height of img to 100px). No other changes are seen in browser. I have already tried adding a query string to the link href in the HTML file, as well as disabling caching in Chrome's developer tools menu. I assume it is a caching issue, however, the fact that I can still see only image dimension changes makes it a bit more complex. Anyone know any solutions?

Example of issue: changing width in img selector from 272px to 372px is reflected in browser consistently. Changing background color from white to red (as shown in code above) is not shown in browser (rendered as white background).

You're missing a semi-colon after the following: `font-family: Roboto,arial,sans-serif`. — Andy Hoffman, Jun 27 '21 at 20:49
Can you include your HTML, along with a [minimum, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? — Andy Hoffman, Jun 27 '21 at 21:22

salar yeganeh · Answer 1 · 2021-06-27T22:56:56.983

to me it worked. I saved your code here and it works when I change some of the properties like background color or font color and etc. I ran the code on chrome
for example I changed background color:

body{
background-color: blue;
}

and it worked
so I guess the problem lies within your head element. maybe one of the stylesheet link addresses is wrong or maybe one of the stylesheets is getting more priority in running the css rules

score 1 · Answer 2 · answered Jun 27 '21 at 22:45

1

It's likely your CSS styles are being superseded by another class, e.g. if you're importing a library that's applying it's own CSS.

You can either increase the specificity of your targeting by adding class names (see order of precedence).

.redContainer {
    background-color: red;
}

or use !important to override other styles.

body {
    background-color: red !important;
}

answered Jun 27 '21 at 22:45

j-petty

2,668
1
11
20

Excellent! Mark the answer as accepted if it solved your problem so future users can find the same answer. – j-petty Jun 28 '21 at 22:30

Only certain specific changes in css file being reflected in browser

2 Answers2