Question

I have this code in an Index.cshtml file:

    @{ViewBag.Title = "Home";}
<link href="Home.css" rel="stylesheet" type="text/css"/>
<img id="logo" src="~/Content/Images/Logo.png" />

This file is a view in my ASP.NET MVC4 application.

When I run the web application, I can see that the source code adds the appropriate HTML around this, and also adds a reference to the ‘Content\Site.css’ file.

However, neither the Site.css file nor my own Home.css CSS file appear to be used when running the application. First of all, any edits I make to Site.css aren’t reflected when I view source when running the application, which is weird. I have saved everything and built the project before running it and checking out the source code through my browser.

Second of all, the CSS link to Home.css (which is in the same folder as my view) does not appear to be used. The HTML editor doesn’t have a problem with the file, and so indicates that the path is valid – but when I click on Home.css in my the source code editor on my browser, I get a 404 error, saying that the file doesn’t exist.

Any idea on what I am doing wrong here?

The actual image I am using here loads correctly.

Answer 1

the CSS link to Home.css (which is in the same folder
as my view) does not appear to be used.

The Views folder is restricted direct access to from the clients. So you should not be putting any CSS, javascript or images files inside it. They should reside in your ~/Content folder (or some other folder which is accessible from the clients). And then reference it like this:

<link href="~/Content/Home.css" rel="stylesheet" type="text/css"/>

As far as your first problem about ~/Content/Site.css is concerned, the stylesheet might be cached by the browser. Try clearing the cache. If you are running your application in Release mode and enabled Bundles, ASP.NET MVC 4 will automatically emit a cache response header so that the static resources included in the bundle get cached in the browser.