CSS is not being applied after changes

asp.net asp.net-mvc asp.net-mvc-2 asp.net-mvc-3

44,270

Solution 1

Hit the Ctrl-F5 for reloading the page without using the cached contents

Solution 2

The browser can cache static files such as CSS files.

If you update a CSS file and the change does not appear when you browse, try using CTRL-F5 within your browser.

Solution 3

This will work when anything else won't, like in my case:

Credit goes to: atticae

You can append a random query parameter to the stylesheet url (for example via javascript or server side code). It will not change the css file that is being loaded, but it will prevent caching, because the browser detects a different url and will not load the cached stylesheet.

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">

44,270

Author by

Alan B

Updated on July 20, 2020

Comments

Alan B almost 4 years

I have problem where I can't apply the style in CSS in my ASP.NET MVC application. The behavior is it applies for the first time and then the subsequent changes to the CSS is not getting reflected in my _Layout.cshtml. I am not sure what I am missing here.

CSS file

body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header,
footer,
nav,
section {
    display: block;
}

/* Styles for basic forms
-----------------------------------------------------------*/

fieldset 
{
    border:1px solid #ddd;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 75px;
}

.editor-label 
{
    margin: 1em 0 0 0;
}

.editor-field 
{
    margin:0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}
#Header
{
    color:white;
    padding:1px;
}
#Content
{
    float:left;
    margin:10px;
}
#SideBar
{
    float :left;
    margin:10px;
    padding :10px;
    border:  dotted 1px  red;
    width:180px;
    font-style:italic;
}
#Footer
{
    text-align:center;
    clear:both;
}

For example I changed "border" in #SideBar from red to black. But it always show red. I might be doing something fundamentally wrong here.

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
       <!--link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
      <link href="@Url.Content("~/Content/SiteStyle.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>

<body>
   <div id="Header" style="background-image: url('/Content/Images/Banner_Final3.png'); background-repeat:no-repeat; width :1500px; height : 150px;"   >

   </div>
   <div id="SideBar">
       @Html.Partial("UserControls/UserLogin", new AlanBeezLab.Models.LoginModel())
   </div>
   <div id="Content">
        @RenderBody()
   </div>
   <div id="Footer">
        <p>Copyright &copy; XXXXXXX</p>
   </div>
</body>
</html>

However, if rename the physical file and change the reference in _Layout.cshtml, I could see the changes I made.

Please help.

Thanks

Jeroen almost 13 years

+1 that's usually it :). Another tip if you're testing in IE: hit F12 to activate the developer toolbar and in the "Cache" menu there's an option "Always refresh from server". Can be useful while developing styles.
Jahan Zinedine almost 13 years

Useful links :stefanhayden.com/blog/2006/04/03/css-caching-hack css-tricks.com/can-we-prevent-css-caching
Alan B almost 13 years

<link href="@Url.Content("~/Content/SiteStyle.css?@new System.Random().NextDouble().ToString()")" rel="stylesheet" type="text/css" /> -- This works as well. I added a random number at the end as above