Override Sharepoint 2010 css with my own custom css

Question

I have a Sharepoint 2010 intranet and I am designing the current template with my own css file. I have added my custom css file to the style library and have added this piece of code in a masterpage at the end in my tag:

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

Now I always need to add the !important tag in my css classess which are also used in the default sharepoint css file. I dont want to have to do that every time. Is there some solution where I can override my own custom css over the default sharepoint css file?

Answer 1

After your page is rendered by SharePoint in the browser, view the source. It is likely that your CSS page is listed before out of the box style sheets like corev4.css.

To rearrange this ordering try:

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

For more information on the After property, see:

• CssRegistration.After Property
• SharePoint CSSRegistration or Link?
• What is new with the CssRegistration control in SharePoint 2010

Answer 2

This sounds like a CSS specificity problem. This article has lots of helpful explanations of the subject.

If you have written the same rule into your external style sheet twice, than the lower rule in your style sheet is closer to the element to be styled, it is deemed to be more specific and therefore will be applied. eg In the following case, the padding would be set as 10px, not 5px.

#content h1 {
padding: 5px;
}

#content h1 {
padding: 10px;
}

To fix your current problem, either as Dipaks suggested add your css directly in the page (as this would take preference over external css files), or even better, and more simply, just add the reference to your css file after the reference to the Sharepoint css, in which case, if they have equal specificity, your css would be applied.