How to reference a .css file on a razor view?

css asp.net-mvc razor
MrBoJangles picture MrBoJangles · Feb 16, 2011 · Viewed 255.6k times · Source

I know how to set .css files on the _Layout.cshtml file, but what about applying a stylesheet on a per-view basis?

My thinking here is that, in _Layout.cshtml, you have <head> tags to work with, but not so in one of your non-layout views. Where do the <link> tags go?

Answer

Darin Dimitrov picture Darin Dimitrov · Feb 16, 2011

For CSS that are reused among the entire site I define them in the <head> section of the _Layout:

<head>
    <link href="@Url.Content("~/Styles/main.css")" rel="stylesheet" type="text/css" />
    @RenderSection("Styles", false)
</head>

and if I need some view specific styles I define the Styles section in each view:

@section Styles {
    <link href="@Url.Content("~/Styles/view_specific_style.css")" rel="stylesheet" type="text/css" />
}

Edit: It's useful to know that the second parameter in @RenderSection, false, means that the section is not required on a view that uses this master page, and the view engine will blissfully ignore the fact that there is no "Styles" section defined in your view. If true, the view won't render and an error will be thrown unless the "Styles" section has been defined.

Related questions

Attach image to ActionLink in MVC 4

I am using ActionLink with id in MVC 4 app and assinging actionLink id an image in css but on on earth I am doing wrong. is not working! here is my code <div class="logo_container"> @Html.ActionLink(" ", "…

Read More
Relative Paths in Javascript in an external file

So I'm running this javascript, and everything works fine, except the paths to the background image. It works on my local ASP.NET Dev environment, but it does NOT work when deployed to a server in a virtual directory. This …

Read More
How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?

I'm building an ASP.NET MVC application, using VB.NET and I'm trying to apply a css class to a Html.ActionLink using the code: <%=Html.ActionLink("Home", "Index", "Home", new {@class = "tab" })%> But when I run the …

Read More