Adding inline styles in SharePoint 2013 page layout

This is another tip which will help you in branding the SharePoint 2013 sites. In SharePoint 2013 when we create a page layout from design manager module then in SharePoint Designer we observe one html file and one aspx page got created for page layout. This is the implementation in SharePoint 2013 for master pages and page layouts. The customization we have to do it in HTML page. SharePoint framework will convert from HTML to ASPX automatically.

For example, if we like to hide the left navigation from the current page layout pages then we will add simple below style to PlaceHolderAdditionalPageHead placeholder.

Once you save the html file then you observe that the style is not applied to page. I have applied simple styles to the page and still they are not applied to any element on the page. After checked the ASPX converted file in Designer I found that the Style is converted as

Which means browsers will ignore executing these CDATA styles. So, these styles will not be applied. After long research and reading many articles found the helpful information from MSDN article. I see there are new implementations in SharePoint 2013 branding. Below is the correct implementation we have to use to write style to the page.

Hope you bookmark another new tip into your mind.:)