Loading Custom CSS Files in Razor Pages
Tags: firstpost, dotnet, css, razorpages
Published: 2020-05-23 13:42:19

## Introduction
Over the past few weeks, I have been working on a Web Application using ASP.NET Core and Razor Pages. The thing that kept frustrating me is how quickly `site.css` got really big and more difficult to maintain and read. After doing some research online, I found out how to solve that problem. Let's learn how.

## Razor Pages Structure
First, it is important to know how Razor Pages figures out how to load your css file. By default, on runtime, The engine reads the file `_ViewStart.cshtml` to know which layout to load for your page and the link to the default style sheet can be found in it.

This is how the `_Layout.cshtml` file looks like by default.
![Layout_Default](https://dev-to-uploads.s3.amazonaws.com/i/f8px84l9hjwpdv02gm3c.PNG)

Notice that bootstrap is loaded by default and then the default `site.css` is loaded. This master page will load these two files to all child pages that use it, such as `Views/Home/Index.cshtml`. 

## Project
Say that you are developing an application to help users track their book readings, which page they are currently on in which book, and what books they want to publicly share on their feed.

## Your Styles
Now say you want to define custom css to pages that belong to a certain group. For instance, you want specific styles for authentication and user pages and other styles for the rest of the web application.

Essentially, you want the `_Layout` to dynamically load the css file based on the child page. The trick that will dynamically load a chosen css file into a child page will be done by using the [RenderSection](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.razor.razorpage.rendersection?view=aspnetcore-3.1) feature of ASP.Net Core. That can be done in **three simple steps**.

### Step 1
The first step is to replace loading `site.css` with `@RenderSection("Styles", false)`. `false` means that the section is optional in child pages.
![Step_1](https://dev-to-uploads.s3.amazonaws.com/i/a8ipinix9a5oatg4u5p9.PNG)

### Step 2
Under `wwwroot/css`, create `user.css` and define the styles for user pages in it.
![Step_2](https://dev-to-uploads.s3.amazonaws.com/i/tc8eofmr8pnacclp1uhz.PNG)

### Step 3
The third step is to reference this section with the link to your chosen style sheet on your page. For example, on the page `Views/User/Register.cshtml` we want to load `user.css` instead of `site.css`. Be sure to reference `site.css` in all other default pages in the same way as well.
![Step_3](https://dev-to-uploads.s3.amazonaws.com/i/mstkxhf77gjgfd81qduf.PNG)

## Result
By now, you're done!! Let's give it a little test in which we load two pages and inspect their CSS files. The two pages will be `View/Home/Index.cshtml` (default) and `Views/User/Register.cshtml` (loading `user.css`).
![Result](https://dev-to-uploads.s3.amazonaws.com/i/um9s89tf2oux2sf7zr1h.PNG)

Hope this article helped maintain your styles in an easier manner. Have a good one.

Credit: Cover Photo by [RhondaK Native Florida Folk Artist on Unsplash](https://unsplash.com/@rhondak?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).