Where do I put my CSS, how do I link to it from the master page?

Question

I have installed SharePoint 2010 on a single machine in farm mode pointing to a db on another server. I would like to start dabbling into branding the site by doing something that I initially thought to be trivially straightforward, link to a custom CSS from a SharePoint 2010 master page.

I have uploaded a custom css (Let's call it custom.css) using SharePoint designer in the Site Assets. What syntax do I need to put to link to it? I have tried the following:

<SharePoint:CssRegistration name="custom.css" After="corev4.css" runat="server"/> 

But the server cannot find the CSS file. I receive the following error:

Cannot make a cache safe URL for "1033/styles/custom.css", file not found. Please verify that the file exists under the layouts directory.

• I've assumed I need to use SharePoint:CssRegistration - Is my assumption correct?
• So what is it exactly that I need to put in the name tag to link to a css uploaded via SharePoint designer?
• Am I even on the right track or would you suggest an alternative way of putting this together?

Ambuscade

Answer 1

I would use Alternate CSS first. But other options are:

• If you put the CSS file in Style Library, you can do this:

  <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom.css%>" runat="server"/>

• Put the CSS on the server as 14\TEMPLATE\LAYOUTS\1033\STYLES\custom\custom.css and then you can do this:

  <SharePoint:CssRegistration name="custom/custom.css" runat="server"/>

Putting the file into its own directory is considered best practice so that it does not interfere with updates to out of the box files.

Feverish

The important thing about the alternate CSS is it also will not get overridden on theme change and is called last. and to ensure some styles stick, use the !important tag which means it trumps all other styling of the tag from other css files. – Tsunami

Hi, <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom.css%>" runat="server"/> didn't work for me, do I literally write "SiteCollection" or the name of mine? I tried both ways and neither worked. I used Alternate CSS which worked fine but not sure why this method isn't working... – Tanbark