How can I target CSS to a particular sharepoint Page Layout file?


Tags: css,sharepoint,page-layout

Problem :

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?



Solution :

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>

    CSS Howto..

    How to make nav and right block fixed, also keep the whole container is in center?

    How to change active link color in bootstrap css?

    How can I center two images side-by-side with Bootstrap 3?

    How to put a image below another?

    How to remove unnecessary margin on top?

    Google Apps Script How to link to JS or CSS file on Google Drive

    CSS and html: how to style input file in css (aline the text with the choose file button)?

    How to apply text rotation in CSS?

    How to change the css and html file at the same time

    How to change ol bullets for clickable images

    How to achieve vertical alignmernt of text paragraphs between Bootstrap columns

    How to fix when someone edits css output of an existing sass file

    How to apply CSS to :last-child button

    How to horizontally center a Views field in a grid using CSS field style

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    How to vertically align both image and text side by side in a div

    Do I need to use float:clear to have content show where I want it to show?

    How to add new value to current css value [closed]

    CSS Shadows (how to get rid of top shadow?)

    How to remove space after a colon in CSS with Sublime Text 3?

    How do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?

    How can I make this menu using only anchor tag and css Not using ul and li?

    jQuery show multiple image thumbnail before upload

    How can I remove a bootstrap buttons hover effect?

    How proper add 2 CSS file in a WordPress theme?

    How to Customise the angular material date-picker?

    How to set style if the content is X [duplicate]

    CSS How to Properly use ems instead of pixels?

    how to load a css for Safari only?

    How to align div horizontally in this case