From: http://heathersolomon.com/blog/archive/2006/10/27/sp07cssoptions.aspx
Skinning a SharePoint 2007 site with Master Pages is by no means and open/shut case of altering the look and feel of a site. There are some CSS inheritance issues that have to be contended with first.
As a quick refresher, styles applied to elements in a page will be styled according to the last property that was applied to it. An inline style will override a style listed in the HEAD tag or in a linked CSS file. Additionally, you can selectively override style properties by selectively listing what should be overridden. For example:
<style>
Body {
Background: black;
Margin: 0px;
}
</style>
</head>
<body style="background: white">
In this sample, the body style of the page will be white with no margins because the inline style only overrode the background property.
This overriding facet of CSS is key in SharePoint. Being 100% aware of what style sheets are called where can really help decrease the number of headaches you incur while trying to figure out why your custom styles are not appearing in your site.
Here is a general breakdown of how styles are pulled into a rendered SharePoint page in regards to master pages:
- If your master page links to a custom CSS file, the CSS file will get pulled BEFORE CORE.CSS.
- If your master page links to a CSS file, and CORE.CSS has been unghosted for the site, the custom CSS file will get pulled AFTER CORE.CSS.
- If you specify a custom CSS file in the Master Page settings (Site Actions/Site Settings/Master Page), the custom CSS file will get pulled AFTER CORE.CSS. Note: CSS overrides and new styles will also be applied to _layouts pages.
- Any styles listed or linked to in the PlaceHolderAdditionalPageHead ASP content placeholder will get pulled AFTER CORE.CSS. Problem with this approach is you will have to list your styles or link to your custom style sheet in every page layout file you create.
- Styles listed in the master page file (not linked to, actually listed out in a set of STYLE tags beneath the links to CSS files) will be called AFTER all links to CSS files, including CORE.CSS.
- Master pages deployed via a Feature will call CORE.CSS AFTER the custom CSS file(s).
So if you want to override any styles that are listed in CORE.CSS (and you will be if you are skinning your site), you will need to do one of the following:
- List the styles in the master page file
- Link to the style sheet through Master Page settings
- Include the styles in the PlaceHolderAdditionalPageHead ASP content placeholder in your page layout files
- Unghost CORE.CSS for the site. I don't recommend this.
My recommendation is to store styles in the master page itself in a set of STYLE tags. If your master page design has variations for assorted subsites, store the CSS differences in a file and reference it via the Master Page settings, or if you need CSS changes for a single page, store it in an HTML file and reference it in a hidden Content Editor Web Part.
