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

Question

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?

score 388 · Accepted Answer · edited Jul 15 '14 at 14:41

388

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.

edited Jul 15 '14 at 14:41

MrBoJangles

12,127
17
61
79

answered Feb 16 '11 at 20:21

Darin Dimitrov

1,023,142
271
3,287
2,928

4

You know, on second thought, that's not so bad. I think it's just new and different. – MrBoJangles Feb 16 '11 at 20:25
@section Styles --> says cannot resolve section Styles, what does it mean? – Revious Nov 07 '13 at 15:10
2

@Sam, it means that there's no such section defined in your Layout. – Darin Dimitrov Nov 07 '13 at 15:12
@DarinDimitrov Is there a way to render at the exact position instead of at the end of the header. I would like to keep a specific order for the css priorities. – Marc Jul 28 '14 at 15:03
1

@Marc It's rendered on a place, where you call `RenderSection` (surprisingly :), not at the end of the header. – David Ferenczy Rogožan Mar 26 '15 at 22:13
_Layout.cshtml is where I have added and it worked! – choudhury smrutiranjan parida Mar 20 '19 at 06:54
Adding the Styles option to my .csthml file I get `The following sections have been defined but have not been rendered by the page at '/Views/Shared/_Layout.cshtml': 'Styles'. ` - I figure this answer needs some more explanation about defining the relevant "section" – PandaWood Mar 08 '22 at 11:08

MrBoJangles · Answer 2 · 2014-07-15T14:47:22.100

24

I tried adding a block like so:

@section styles{
    <link rel="Stylesheet" href="@Href("~/Content/MyStyles.css")" />
}

And a corresponding block in the _Layout.cshtml file:

<head>
<title>@ViewBag.Title</title>
@RenderSection("styles", false);
</head>

Which works! But I can't help but think there's a better way. UPDATE: Added "false" in the @RenderSection statement so your view won't 'splode when you neglect to add a @section called head.

edited Jul 15 '14 at 14:47

answered Feb 16 '11 at 20:21

MrBoJangles

12,127
17
61
79

There isn't a better way, although I would name the section `"Head"`. – SLaks Feb 16 '11 at 20:23
You're exactly right. Calling it "pageStyle" suggests that it's only for that purpose. – MrBoJangles Feb 16 '11 at 20:27
1

If you do it like this, you would need to add "MyStyles" in all Views, I would go with Darins answer. – Filip Ekberg Feb 17 '11 at 07:21
Right-o. That's why I added the false argument to `@RenderSection()`. Good catch. – MrBoJangles Feb 17 '11 at 17:09

score 17 · Answer 3 · edited May 23 '17 at 12:03

17

Using

@Scripts.Render("~/scripts/myScript.js")

or

@Styles.Render("~/styles/myStylesheet.css")

could work for you.

https://stackoverflow.com/a/36157950/2924015

edited May 23 '17 at 12:03

Community

1
1

answered Mar 22 '16 at 15:08

Nishanth Shaan

1,422
15
18

4

Please do not post links to [duplicate answers](//meta.stackexchange.com/a/211726/206345). Instead, consider other actions that could help future users find the answer they need, as described in the linked post. – Mogsdad Mar 22 '16 at 15:12

score 3 · Answer 4 · edited Jul 30 '11 at 09:52

3

layout works the same as an master page. any css reference that layout has, any child pages will have.

Scott Gu has an excellent explanation here

edited Jul 30 '11 at 09:52

shanethehat

15,460
11
57
87

answered Feb 16 '11 at 20:20

BentOnCoding

27,307
14
64
92

1

Much obliged. However, my question is, how do I set a reference to a single view, not the "master". – MrBoJangles Feb 16 '11 at 20:22

score 1 · Answer 5 · edited Feb 28 '19 at 14:11

1

I prefer to use the razor html helper from Client Dependency dll

Html.RequireCss("yourfile", 9999); // 9999 is loading priority

edited Feb 28 '19 at 14:11

Suraj Rao

29,388
11
94
103

answered Feb 28 '19 at 13:56

john blair

466
5
13

score 0 · Answer 6 · edited Apr 03 '21 at 19:55

0

You can this structure in _Layout.cshtml file

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />

edited Apr 03 '21 at 19:55

SwissCodeMen

4,222
8
24
34

answered Mar 31 '17 at 03:50

mofidul

119
3
11

3

How does this allow me to selectively apply a style sheet per view? – MrBoJangles Mar 31 '17 at 16:45
You can also add a class or id to each section, and inside the header you could have a styles like the one mentioned by mofidul. What I do is I work with sass, so each view has a separate class container. In that way I created sass pages for each section, which in the end is more structured and organized. – Leo Jun 07 '18 at 07:53
what is the meaning of rel="stylesheet"? – CleanCoder Apr 23 '20 at 18:27
1

@SvenKrauter `` can also be used for things other than stylesheets (ie, prefetching next pages, favicons), so `rel="stylesheet"` tells the browser that the referenced file is a stylesheet. – jao Oct 06 '20 at 08:43

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

6 Answers6

Linked

Related