Styling divs and other css styles to HTML elements in SharePoint 2013

Question

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?

Answer 1

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/

Answer 2

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.

//M

Answer 3

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