views:

823

answers:

2

Is it possible to create a .CSS file for each SharePoint Page Layout I develop, or does the CSS for each possible layout in a master page need to be referenced in the master page?

IE is it possible to affect the <head> of the page a page layout is used in?

+3  A: 

You can embed the CSS that you want to use in a Page Layout by putting in a tag in the page layout. For example:

<style type="text/css">
 .ms-pagetitle, .ms-titlearea
 {
  margin-bottom: 5px;
 }

</style>

Or in the page layout you can also create a relative link to the CSS file that you would like to use as well:

<link rel="stylesheet" type="text/css" href="/_layouts/styles/mystyle.css"/>

In this way you can have different css styles overridden in the page layouts that you use. Hope that helps!

Michal
I did not think that <link /> would work so I never even tried it!
Aidan
I would strongly recommend using mrtrombone's solution (using the "PlaceHolderAdditionalPageHead" Content Placeholder) so as to ensure that the CSS is rendered at the top of the page.
Ryan Shripat
+3  A: 

Michal's solution can be further enhanced by including any links etc in the PlaceHolderAdditionalPageHead content placeholder tag on your layout page. This way it will be included properly in the head of the generated page.

e.g.

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
   <link id="Link1" href="<% $SPUrl:~SiteCollection/Style Library/mystyle.css%>" runat="server" type="text/css" rel="stylesheet" />
   <SharePoint:ScriptLink id="jQueryCore" language="javascript" name="ui.core.js" runat="server"/>
</asp:Content>
Mark