SaaS CMS has officially launched! Learn more now.

Adding styles to the head for specific blocks



I would like to be able to add styles - which are specific to certain blocks - only when those blocks are used in a page.

I had found this - although I realise it is rather out of date:

which amounts to basically doing:

private IRequiredClientResourceList RequiredClientResourceList { get; }

public MyBlock(IRequiredClientResourceList requiredClientResourceList){
    RequiredClientResourceList = requiredClientResourceList;

public override ActionResult Index(MyBlock currentBlock){

That was being called from a block along with ensuring the _Layout.html had this in:


and all seemd to be working fine, at least locally it was. But it turns out it its not working reliably at all.

is there a way to add styles on a block by block basis, or am I going to have to simply inline the css link in the block view?

Edited, Jan 19, 2021 16:31


I'm the author of that blog post. What is not working? Adding resources this way should work.

Jan 19, 2021 17:52

Hi Johan, thanks for the reply. It's simply not adding styles to the head. Scripts at the end of the body work fine -

I have both the


 in the head and,


at the end of the body.

Having thought about it a bit, I assumed this was because the block is decided/controller is called after the _Layout <head> was rendered/processed, and adding stuff with the AtHeader() was happening too late. Although it does seem to work intermittantly...

But I would be happy to take some pointers as to what I can do to get this working, as it seemed like a really nice way of doing it.

many thanks

Edited, Jan 20, 2021 8:18

Small amendment, as I have found the cause of the problem.

The Page type in question has a ContentArea which is being called by a Html.Action outside of the RenderBody() in the _Layout.cshtml, and the Block I am attempting to add the styles for is in that ContentArea. Which means, as I understand it, that the _Layout is now being worked through from top to bottom and the RequiredClientResources("Header") has already been dealt with, so it is too late to add styles to from this block.

I am not sure if there is a way to fix this, short of changing the Layout considerably, and moving the Html.Action call(s) into the Page view, which unsurprisingly I don't want to do.

Are there any other options I am missing?

Jan 21, 2021 15:25

I realise this is a bit old now this post, and I have been able to use the IRequiredClientResourceList for msot isntances to put styles in the head.

however, I wonder if it is possible to override the markup which is produced by using


as I would like a link tag like this:

<link rel="preload" as="style" type="text/css" href="path/to/file.css />

I had tried using a RenderSection in the _Layout but it doesnt seem to work when called from a block view - works fine for pages. 

Edited, Apr 09, 2021 10:36

Hi Nat 

I use `RequireHtmlInline` 

requiredClientResourceList.RequireHtmlInline($@"<link rel=""preload"" href=""{urlSmall}"" as=""image"" media=""(max-width: 500px)"">").AtHeader();
requiredClientResourceList.RequireHtmlInline($@"<link rel=""preload"" href=""{urlMiddle}"" as=""image"" media=""(min-width: 500.1px) and (max-width: 1200px)"">").AtHeader();
requiredClientResourceList.RequireHtmlInline($@"<link rel=""preload"" href=""{urlLarge}"" as=""image"" media=""(min-width: 1200.1px)"">").AtHeader();
Apr 19, 2021 10:45
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.