CSS is not being applied after changes

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.

Contents hide

CSS file

_Layout.cshtml

Answers:

Method 1

Method 2

Method 3

Method 4

Method 5

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(" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
      <link href="@Url.Content(" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"~/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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 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.

Method 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" rel="nofollow noreferrer noopener">

Method 4

Unfortunately ctrl+f5 does not work for me. I have to go to Chrome: F12 -> Network tab -> right click within white area where all the get and post records are -> Clear browser cache. Now if you press ctrl + f5 or just f5 it should work.

Method 5

In my case the problem was I had a resource style file which was referring by the code

string location = Page.ClientScript.GetWebResourceUrl(typeof(PageBase), "MyNS.Common.Web.Base.CommonStyle.css");
LiteralControl include = new LiteralControl(string.Format(tempLink, location));

When I change / add some style in the file it was not reflecting in the CommonStyle.css
it was not reflecting in the web page even after clearing the cache(ctrl + f5 , ctrl + shift + f5)?

On my analysis I found the reason was –

stop the debugging, rebuild the solution and run it again so that all
the web resource styles load once again, simply clearing the cache as
we does normally for any html change will not help,after doing this my
change in the style got reflected in the web page and it fixed my problem.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating