Content editor webpart overrides Sharepoint CSS

Question

Currently i use w3.css to a html page and use it in content editor webpart. The issue here is the CSS is affecting the whole page.How do i get the css to apply only to the content editor webpart.

i used the below link option 4 to add the content editor and the HTML file http://sharepoint.hannahswain.eu/2014/10/10/adding-a-code-snippet-to-page-content-on-sharepoint-2013/

Answer 1

Using !important is a CSS hack and will get you in trouble at one point.
What happens when someone else uses the same !important hack ???

Learn proper CSS, Selectors and its rules for CSS Specificity and you will be able to master any CSS problem.

In your scenario you can wrap your content in a DIV

<div id='myCEWP'>
  <H1>Hello World!</H1>
</div>

And then apply your CSS only to that one H1 in the DIV :

<style>
   #myCEWP > H1 {
     color:green;
   }
</style>

Resources:

• The 30 CSS Selectors you must memorize
• CSS Specificity, things you should know

Answer 2

Can you please provide the code you have written? you may have to define a id to the Content editor element and apply css on those id. To override css we use !important after every attribute of css.

ex:

.CssClass{

color: white !important;
}