Attaching CSS to only one html welcome page

Question

I am trying to set a html homepage to a sharepoint page, The html is based off a bootstrap template as it felt the best to fit the purpose. My problem is that once uploaded to the sharepoint server using Sharepoint designer 2013 Everything gets messed up. I am assuming this is due to sharepoint's css overwriting my own. I have the bootstrap.css and mycustom.css.

I cannot apply this css to a masterpage due to the fact that this will be the only html page that uses it and this css breaks everything else.

Answer 1

Yes you are right, by default Bootstrap will not run in SharePoint, because SharePoint is overwriting it's CSS. Check http://bootstrapsharepoint.codeplex.com for a running Bootstrap Template.

Answer 2

why not convert your html to Master page and that page only apply to your home page. here is the link how to convert it http://msdn.microsoft.com/en-us/library/jj822370.aspx

or may be think about to create a page layout...

http://msdn.microsoft.com/en-us/library/jj822368.aspx

Answer 3

First try this: Add the reference to your CSS files after the Sharepoint CSS references. By them being placed afterwards, they should override Sharepoint's CSS files and references.

If the above fails then:

You can add the below next to every attribute you want overwritten (which is all)

!important

Attribute to not allow your css to be overwritten. Simply add it next to your properties like below:

h3#issueHeader { color: blue !important; }

Answer 4

Because using the .wsp was not an option my only solution was to edit the default.aspx that was used as the homepage with the html I wanted to use. I also made my html a master page so that bootstrap.css would be loaded and applied the alternate css as mycustom.css no idea why this was required I was only messing around and it worked. Then I had to edit my master page to delete the ugly navigation and now I am set.

Thank you for all your answers as you lead me in the correct direction to find my solution.