How to apply Custom Styles to Page Layouts in SharePoint

Welcome to  designer dairy blog, here we are going to  discuss How to apply Custom Styles to Page Layouts in

SharePoint

Step1:

We refer the css styles  in the masterpage, so that style applicable in all the pages. There may be situation comes , we want to override  the css file in the pages, which comes from masterpage.

Step2:

To override the styling in the particular page, best way to edit the page-layout of the particular page.

If you go "_Catlog/masterpage" You can find the pagelayouts in both .html and .aspx.

For example:

I have page called about.aspx, i want to change the style of the page. So i have to go pagelayouts and edit the aboutpagelayout.html file.

In your custom Page Layout, search for id=”PlaceHolderAdditionalPageHead“. You’ll find it in an opening tag that looks like this:

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
     <!--MS:<style type="text/css">--> 
          #wr_leftNav { display: none !important; } 
     <!--ME: </style>-->

So i have added the Inline-style above the contentplaceHolder, Based on your needs 

You can also add the Css reference link as below

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
 <link href="indigo_layout.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />

Step3:

Step3:

Thanks for reading the article.Stay Tuned on www.webdesignersdairy.com  for more updates on Sharepoint.