When I change my Css it isn't visible in the Html file

Question

If I change anything in Css, for example if I change 20px to 300px it does't work. This is also the case with colors or text. But if I change text in the Html file it does work. I can't find anything in the Css code or the Html code that is wrong. The Css file is connected with the Html file but it still doesn't work. Can someone please help.

The Css code:

@charset "utf-8";

body {
  font: 0.9em Tahoma, Verdana, Arial;
  line-height:172%;
  background-color: #ffffff;
  margin: 0px;
}

.center {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
}

#containercontainer {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  padding: 30px;

}


/* bovenste kopje ========================================*/
h1.titel {
  color: black;
  font: Gill Sans, sans-serif;
  font-size: 20px;
  margin-bottom: -2px;
  margin-top: 0px;
}


#titel {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 10px;
  border-bottom: solid black 1px;
  width: 5.5%;
  left: 45%;
  position: relative;
  margin-bottom: 20px;
}




/* De Slideshow ========================================*/


.fling-minislide {
    width:100%; 
    height:100%; 
    padding-bottom: 0%; 
    overflow:hidden; 
    position:relative; 
    }

.fling-minislide img{ 
    position:absolute; 
    animation:fling-minislide 15s infinite; 
    opacity: 0;  
    size: 100% 100%;
    }

@keyframes fling-minislide {33%{opacity:1;} 60%{opacity:0;}} 
    .fling-minislide img:nth-child(3){animation-delay:0s;}
    .fling-minislide img:nth-child(2){animation-delay:5s;}
    .fling-minislide img:nth-child(1){animation-delay:10s;}

#slideshow {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;
  float: center;
  border: solid black 2px;
  width: 55%;
  height: 300px;
  position: relative;
  left: 21%;
}

/* Het nieuws blokje ========================================*/

img.nieuws {
  margin-top: -20px;
  height: 300px;
  width: 400px;
  position: relative;
  border: solid black 2px;
  margin-bottom: 20px;
}

p.nieuws {
  float: right;
  margin-top: -10px;
  position: relative;
  margin-bottom: 20px;

}

#nieuws {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 10px;
  width: 78%;
  height: 50px;
  left: 10%;
  position: relative;
  margin-bottom: 20px;
}

/* Het vragen blokje ========================================*/


#vragen {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 10px;
  width: 80%;
  padding-left: 0px;
  height: 1000px;
  left: 10%;
  position: relative;
  margin-bottom: 20px;
  top: 300px;
  border: solid black 1px;  
}


p.A{
  margin-top: 10px;
  border-bottom: solid black 1px;  
  font-size: 22px;
  margin-left: 400px;
}



#cbrlogo {
    background: #fff;
    width: 50px;
}

#container {
  width: relative;
  padding: relative;
  background: #fff;
  min-height: 500px;
}

.afbeelding_container {
  position: relative;
  float: left;
  margin-left: 0px;
}

.afbeelding_container .tekst_container {
  position: relative;
  top: 25px;
  left: 50px;
  color: #00f;
  font-size: 36px;

}

.schoon {
  clear: both;
}


#overzicht {
  margin-left: 25px;
}

.links {
  float: left;
  width: 320px;
}

#rechts {
  float: right;
}

#onder {
  clear: both;
}

.breder {
  width: 4000px;
}

ul {
  padding-left: 35px;
  padding-right: 35px;
  list-style: none;
  background: 00f;
}

hr {
  margin: 0px 0;
  height: 1px;
  border: 1px solid #fff;
  border-top: 10px solid #00f;
  background-color: #fff;
}

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: none;
}

a:active {
  color: blue;
  text-decoration: none;
}

.menu {
    display: block;
    margin: 0px;
    padding:0px;
    position: absolute;
    width: 100%;
    background-color: #3695F6;
}

ul.menu {
    list-style-type: none;
}

img.menu {
    height: 40px;
    width: 30%;
    position:relative;
    margin: 10px;
    margin-right: 0px;
    list-style-type: none;
}

.menu li {
    float:left;
    position:relative;
    width: 200px;
    text-align:center;
    text-decoration: none;
    margin: 0px;
    padding: 0;
}

.menu li a {
    display: block;
    padding-bottom: 20px;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 0px;
    text-decoration: none;
    position: relative;
    z-index: 100;
}

.menu li a span{
  display: block;
  padding-top: 10px;
  font-weight: 700;
  font-size: 20px;
  color: rgba(255, 255, 255,);
  font-size: 18px;
}

.menu li:hover span{
  color: #FFFFFF;
}

th {
  padding: 10px 30px 10px 30px;
}

td {
  padding: 0 30px 0 30px;
}

td.muteren {
  padding: 0 0 0 10px;
}


tbody:before {
    line-height:1em;
    display:block;
}

thead {
    text-align: left;
}

The Html code:

<?php 
    require 'core/init.php';
?>

<!DOCTYPE html>
<html lang="nl">

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css" >
    <title>CBR Theorie examen </title>  
  </head>

  <body>    
    <div id="container">
      <?php
          echo '<div>';
          include 'includes/menu.php';
          echo '</div>';

      ?>

    <div id="containercontainer">

        <div id="titel">
            <h1 class="titel">Home</h1>
        </div>
<!-- de slideshow ======================================================== -->      
      <div id="slideshow">
            <div class="fling-minislide">
                <img src="images\slideshow1.jpg" alt="Slideshow 3" />
                <img src="images\slideshow2.jpg" alt="Slideshow 2" />
                <img src="images\slideshow3.jpg" alt="Slideshow 1" />
            </div>
      </div>

<!-- Nieuws  ================================================================================== -->       
        <div id="nieuws">
            <h1 style="width: 300px;" class="titel">Digitaal Examen</h1><br>
            <img class="nieuws" src="images/computer.jpg" alt="nieuws plaatje" />
            <p class="nieuws">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in erat laoreet sem <br>
            scelerisque pulvinar. Pellentesque habitant morbi tristique senectus et netus et <br>
            malesuada fames ac turpis egestas. Suspendisse interdum placerat leo, ac iaculis <br>
            posuere eu. In non pulvinar ipsum. Vestibulum pretium sem nec enim pharetra, ac <br>
            sapien tempor. Praesent odio ipsum, vehicula at viverra ut, consectetur et sapien.<br>
            vel congue dolor, sit amet pulvinar felis. Pellentesque et turpis viverra, <br>
            tempus metus. Nunc porta sapien eget elit maximus dictum sed sed dolor. <br>
            velit et nibh dapibus, ac vulputate orci bibendum. Donec blandit faucibus <br>
            malesuada fames ac turpis egestas. Suspendisse interdum placerat leo, ac iaculis <br>
            posuere eu. In non pulvinar ipsum. Vestibulum pretium sem nec enim pharetra, ac <br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in erat laoreet sem <br>
            scelerisque pulvinar. Pellentesque habitant morbi tristique senectus et netus et <br>   
            </p>
        </div>

<!-- Veel gestelde vragen ======================================================================= -->       
        <div id="vragen">
            <p class="A">Veel gestelde vragen</p>
        </div>

     </div> 

    </div>
  </body>

</html>

Hi, Could you please share your HTML file where you have linked this css. Any working fiddle would be great — Master.Deep
– Master.Deep, Commented Mar 11, 2020 at 8:38
Probably just a caching issue? Have you reloaded the page while circumventing your browser cache? — C3roe
– C3roe, Commented Mar 11, 2020 at 8:39
in <link> at the end of href add version so it wil look like for example like this: href="css/style.css?v=1 and check if this help — ciekals11
– ciekals11, Commented Mar 11, 2020 at 8:45
Working fine at my end. As mentioned by @CBroe, it could be cache issue or file path must be wrong. — Master.Deep
– Master.Deep, Commented Mar 11, 2020 at 8:48

Nemoko · Accepted Answer · 2020-03-11 08:44:39Z

2

Welcome to SO

to fix this issue. if you have this issue anytime. Add a version=number to it like this:

<link rel="stylesheet" type="text/css" href="css/style.css?V=01">

I don't know why exactly but it has to do with your browser and the cache not syncing correctly.

answered Mar 11, 2020 at 8:44

Nemoko

4512 gold badges4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user13043784 Over a year ago

I just changed the link css line to: <link rel="stylesheet" type="text/css" href="css/style.css?V=01"> and it works now!! Thanks a lot for the awnsers.

Nemoko Over a year ago

Please mark the question answered by clicking on the checkmark button on the left of my post :)

Swimmer F · Accepted Answer · 2020-03-11 08:55:51Z

If you are uploading the files to a server and viewing it in your browser, there is a good chance that the stylesheet is loaded from your browser cache to safe network resources. A commonly used technique, known as cache busting, is adding ?ver=X, which makes the browser re-download the file, because it is named differently from the one it has cached. In your case, that would look like this:

<link rel="stylesheet" type="text/css" href="css/style.css?ver=1">

Since you are using php, you could instead use ?ver=<?php echo uniqueID(); ?> which creates a new ID whenever the html is requested from the server - useful while developing. Don't forget to remove it in the final version because browser caching is a useful feature.

Collectives™ on Stack Overflow

When I change my Css it isn't visible in the Html file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related