I'm developing a web part which needs some custom CSS files. So I'm using the CssRegistration class to add them to the page header.

The code registers 4 CSS files which got deployed to the layouts folder by the web part feature. A fifth CSS files is optionally registered when there's a path to it set in the web part's property AdditionalCss. The CSS files should be inserted in the header after all SharePoint CSS files and should be sorted in the order they were added by code.

The code I used is the following:

var contentCss = new CssRegistration 
                 { Name = "/_layouts/MyWebPart/css/content.css", 
                   RevealToNonIE = true };

if (SPContext.Current.Web.UIVersion == 4)
     contentCss.After = "corev4.css";
     contentCss.After = "core.css";


var customCss = new CssRegistration 
                { Name = "/_layouts/MyWebPart/css/cn_custom.css",
                  After = contentCss.Name, RevealToNonIE = true };

var styleCss = new CssRegistration 
               { Name = "/_layouts/MyWebPart/css/styles.css", 
                 After = customCss.Name, RevealToNonIE = true };

var colorsCss = new CssRegistration 
                { Name = "/_layouts/MyWebPart/css/colors.css",
                  After = styleCss.Name, RevealToNonIE = true};

if (!string.IsNullOrEmpty(AdditionalCss))
    var webPartCustomCss = new CssRegistration 
                           { Name = AdditionalCss, 
                             After = colorsCss.Name, 
                             RevealToNonIE = true };            

When I add the web part to a page all CSS files are added to the page as expected. Except the files are sorted in the wrong order.

Without the custom CSS file the order is: (link's rel- and type-attribute were removed for a better overview)

<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>

With the custom CSS file the order is:

<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/sites/mysite/Style%2520Library/de-de/test.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>

As you can see both cases provide a totally different order and the CSS files were never sorted in the order they were added by code.

With this strange behavior the whole CssRegistration class is not very useful as you cannot relay that the CSS files are always in the same order. This makes designing with CSS nearly impossible.

  • 1
    Does anybody have insights into this issue? I have 5 css file. When rendered the last 2 CSS files flip positions. Is this a MS bug?
    – user2434
    Feb 17, 2011 at 4:31

3 Answers 3


I've also observed what you have; beyond ensuring that your CSS comes after core.css/corev4.css, the CSSRegistration.After property plainly doesn't work. I've extensively tested CssRegistration by using it to link 10 different CSS files into one user control, and it completely ignored the dependencies I specified. Furthermore, the ordering seems completely arbitrary - I couldn't discern any sort of pattern.

I'm thinking of rolling my own version of CssRegistration which actually works.


Have a look @




  • Thanks, I know this page. But none of the tips helped me. Even applying the CssRegistration objects in reverse order didn't help. Then the order is: content.css, styles.css, cncustom.css, colors.css. So again the order is not the one I would expect.
    – Flo
    Nov 23, 2010 at 13:30

Remember when you use the css registration tag, you have a "after" property.

meaning if u got 5 css files called: 1.css, 2.css, ..., 5.css you can set the after property on the registration of 2.css to "1.css". This will execute the second css file after the firts one has been loaded...

If you want the thirth file to be executed after the second file u just put the after property on the 3.css file to "2.css".

  • As you can see in my code snippet above, I'm already using the After property.
    – Flo
    Nov 23, 2010 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.