My CSS doesn't change, why?

Question

So after many weeks, I got back to coding and I've got a problem.

The project I was working on contains the basic stuff of a PHP site and now I'm trying to re-design my homepage.

The problem is, that everytime I delete or change something in the CSS, the design never changes as if it's like frozen or something, and it happens for every page. When I delete the link to the CSS in my HTML, the design goes away. Here's the code:

var scrolled=0;
    $(document).ready(function() {
        $("#master").click(function() {
            $("#holder").slideToggle('slow');
        });
                
        $("#down").on("click" ,function() {
            scrolled=scrolled+300;
            $("#solut").animate({
                scrollTop: scrolled
            });
        });
    });

@font-face {
      font-family: 'FontAwesome';
      src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
      src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    body {
        margin: 0;
        padding: 0;
        background-color: #e0e0e0;
        overflow-x: hidden;
    }
    .navbar {
        width: 100%;
        height: 60px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="assets/logo.png" />
        <link href="css/font-awesome.min.css" rel="stylesheet" />
    </head>
    <body>
        <center>
          //code goes here: bunch of divs and texts
        </center>
    </body>
    </html>

The stylesheet is likely being cached. Try changing the link to read "css/index.css?v=1" (under most configurations, anything after the question mark will be ignored - put whatever you like) to see if this is the case. — spacer GIF
– spacer GIF, Commented Jun 11, 2018 at 17:06

user7637745 · Accepted Answer · 2018-06-11 18:31:03Z

Getting back to an old project without a short run-through-guide, readme or a basic list of automated tasks can lead to several, unwanted side effects, when running and testing the website.

Here are some of what I've met before from the top of my head:

Browser cache: Open DevTools in Chrome, then reload the page by clicking Empty Cache and Hard Reload (Ctrl+Shift+F5). If it doesn't help, give your CSS a name like: (more on cache-bursting): <link href="css/index.css?v=1.0.1" rel="stylesheet" />
Framework cache: If you use a framework with resource caching, delete/empty it. It depends on what framework you use, if any.
CSS Transpiler does not run: If you use some transpiler (SASS, LESS, etc.), sometimes running of the transpilation is forgotten.
Testing on mobile devices: They can and do cache often, just use cache-bursting during development.
Wrong paths/inability to access files: Check your webserver logs to get what's wrong.
Not REALLY editing the file: If you prefer an IDE (e.g.: IntelliJ IDEA ;)) and when you edit the specific file, save it, then upload it (e.g.: via FTP), it can happen, that the specific file won't get updated. More on this.

Rambo · Accepted Answer · 2018-06-11 17:19:35Z

0

It may be a caching issue. But have you double checked your developers tool to see if the CSS is carrying over? Sometimes I make small mistakes of linking the file incorrectly - forgetting to go back a folder "../css/index.css

answered Jun 11, 2018 at 17:19

Rambo

256 bronze badges

Collectives™ on Stack Overflow

My CSS doesn't change, why?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related