CODEWITHSUNDEEP
cssasp.net-mvcrazor
MrBoJangles
MrBoJangles

Reputation: 12247

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

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?

Upvotes: 224

Views: 332281

Answers (7)

Steven Liekens
Steven Liekens

Reputation: 14133

Starting with .NET 6, you can add a css file alongside your cshtml files.

For example:

WebApp/Pages/
├── Index.cs
├── Index.cshtml
├── Index.cshtml.css <-- NEW

This will generate a file {ASSEMBLY NAME}.styles.css which you must include in your shared _Layout.cshtml.

Configure _Layout.cshtml to include .cshtml.css styles

(Replace WebApp with the name of your csproj file.)

<!DOCTYPE html>
<html>

<head>
+    <link rel="stylesheet" href="~/WebApp.styles.css" asp-appendversion="true" />
</head>

...

</html>

Doing it this way has the additional benefit that the styles are isolated, and won't accidentally leak outside the Razor page where they are used. For example, you can add a style for <p>.

/* in Index.cshtml.css */
p {
    color: red;
}

When the project is built, the HTML and CSS are transformed to include a randomized attribute name.

/* Transformed css */
p[b-ruxg182vl6] {
    color: red;
}

Similarly, the <p> tags in Index.cshtml are decorated with this attribute.

<p b-ruxg182vl6>Hello World</p>

This way, only the paragraphs in Index.cshtml will have the red color. Paragraphs in other parts of your application are not affected.

Full documentation about CSS isolation: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation

Upvotes: 2

mofidul
mofidul

Reputation: 119

You can this structure in _Layout.cshtml file

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

Upvotes: 0

john blair
john blair

Reputation: 546

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

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

Upvotes: 1

Nishanth Shaan
Nishanth Shaan

Reputation: 1472

Using

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

or 

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

could work for you.

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

Upvotes: 19

MrBoJangles
MrBoJangles

Reputation: 12247

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.

Upvotes: 24

Darin Dimitrov
Darin Dimitrov

Reputation: 1039438

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.

Upvotes: 391

BentOnCoding
BentOnCoding

Reputation: 28228

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

Upvotes: 3

Related Questions