I am following this SharePoint 2010 tutorial where the author is adding styles directly in the html mark-up of the page.

When I edit the mark-up in SharePoint 2013 and click OK initially the styles are applied, but when I click save and view the page again, all styles have been stripped out.

As Fox politely pointed out, this is normal behaviour - so how do I apply styles to html elements within SharePoint 2013 if I want to make a custom page with a custom layout?

  • 1
    What are you editing. Master Page, Page Layout? If you do edit content pages directly, SharePoint will strip out any HTML Elements such as <script> or <style> tags. – Fox Mar 8 '13 at 8:52
  • Ah that explains it then - I reworded my question to ask how to reference css files from templates. Thanks for the help so far. – morleyc Mar 8 '13 at 8:58

If you don't want to edit master pages or page layouts I usually store the CSS in a document library (or asset library) on the same SharePoint site. Then I add content editor web part (CEWP) to the page to 'insert' this css into the page.

Disadvantage is that you need to add that CEWP to every page where you want to apply the styling.

I have once written a blog post about it. Although the blog post is about inserting HTML snippet (google maps sample). The idea for your CSS is exactly the same. Store it in a file an reference it with a CEWP. (works great for JavaScript as well)

You find the post here: http://blog.amtopm.be/2011/05/04/use-google-maps-in-sharepoint-oob/

| improve this answer | |
  • Thanks @W0ut, is it much more complicated to use a page layout or would we reference in the same way with the page template? – morleyc Mar 8 '13 at 19:22
  • Creating page layouts or a master has become a lot more easier in SP2013 by using the Design Manager (not in the Foundation version). Personally I prefer creating a page layout and insert the css (or a reference to the css) in the new page layout. However some clients do not allow me to create/use custom page layouts, SPD, etc... In such cases I found the above approach useful. – Wout Mar 9 '13 at 6:30

A very effective and easy way is to store the css files either in the file system or in the style library(I vote for the first one).

  1. First create a css file with the style definitions you want and save it in the structure in Visual Studio of a SharePoint Project. The files could either be copied to SharePoint root or to a SharePoint library on deployment.
  2. Then create a user control which you deploy to the controltemplates/projectname. In that user control you add the references to your css files add possible javascript files.
  3. Create a delegate control that puts your user control in the AdditionalPageHead on the master page.
  4. Create a feature for your delegate control that will activate your css.


| improve this answer | |

I have not worked with Sharepoint 2013 before but i'm pretty sure that it stays exactly the same as in 2010. You can add

| improve this answer | |
  • similar, but not exact. – 1c1cle Jun 5 '13 at 16:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.