Adding Partial View Style Sheets while Using Layout Pages

Question

Hello everyone and thanks for the help in advance. I suspect this is a simple question, but I can't figure out the best practices for accomplishing this. I have a MVC web application that utilizes Layout pages for repetitive parts of the page such as the header, footer, and general page layout. Within the layout page, I have css files loading to accomplish the layout along with header and footer elements. What I am unclear about is how to load the css file for various partial views that utilize the page layout. For example, I have a partial view called article that needs the corresponding css file. But another partial view may need a completely different css file. How do I correctly load these css files? Any help would be appreciated.

Answer 1

In your layout page be sure there is styles and scripts sections defined. Then in the page calling the partial view registers the css files. Sections are not supported in partial views.

Answer 2

Hi @Kmcnet

You can rewrite the CSS or reference new CSS external links.

For example:

One CSS in Layout pages "h1" you want to use another CSS on one page. You can rewrite this CSS.

<style>
    h1 {
        ....
    }
</style>

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Hi @Kmcnet

In order to give you a better understanding, I will explain it to you further.

In ASP.NET Core's layout pages there is a **<a>**control, its style class is .navbar-brand

I write a file called MyTest .css.

Introduce CSS files:

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

This is the original style:

This is a modified style:

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.