Microsoft Sharepoint adds "External Class" to my CSS after saving a rich field
<p>So I am pretty new with Sharepoint but I am experienced enough with HTML and CSS. I currently made this mini html application to change some pictures of the hyperlinks on hover and it works fine if I run it on a normal browser/outside of sharepoint. </p>

<p>Now the problem is as follows, I go into sharepoint and I write my code in a rich field (which gives me the option to embed html into it) and it doesn't work. It would work in "edit mode" but not after saving it. Also after saving the HTML code, it generates something called "External class" next to each of my CSS objects as shown below. Is that the reason why my code is not working after saving? What is sharepoint doing to my HTML code? Is there a way to fix this? I would appreciate some help on the matter.</p>

<p><strong>Original:</strong>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>            &lt;style type="text/css"&gt;
                        #map
                        {
                                   width:663px;
                                   height:715px;
                                   background-image:url("/sites/00172/SiteAssets/Germany1-Standard.png");
                        }
                        #Bremen
                        {
                                   position:absolute;
                                   width:37px;
                                   height:53px;
                                    top:359px;
                                   left:243px;
                                   background-image:none;
                        }
                        #Berlin
                        {
                                   position:absolute;
                                   width:35px;
                                   height:55px;
                                   top:393px;
                                   left:550px;
              background-image:none;
                        }
                        
                        #Coburg
                        {
                                   position:absolute;
                                   width:41px;
                                   height:54px;
                                   top:605px;
                                   left:382px;
              background-image:none;
                        }
                        #Hallstadt-Bamberg
                        {
                                   position:absolute;
                                   width:43px;
                                   height:51px;
                                   top:659px;
                                   left:368px;
                                   background-image:none;
                        }
                        
                        #Bremen:hover
  {
   background-image:url("/sites/00172/SiteAssets/Germany1-Bremen.png");
  }
  
  #Berlin:hover
  {
   background-image:url("/sites/00172/SiteAssets/Germany1-Berlin.png");
  }
  
  #Coburg:hover
  {
   background-image:url("/sites/00172/SiteAssets/Germany1-Coburg.png");
  }
  
  #Hallstadt-Bamberg:hover
  {
   background-image:url("/sites/00172/SiteAssets/Germany1-Hallstadt.png");

  }
            &lt;/style&gt;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>            &lt;div id="map"&gt;
                        &lt;a href="/sites/00172/Lists/Calendar01/calendar.aspx" title="Bremen" id="Bremen"&gt;
                        &lt;a href="/sites/00172/Lists/Calendar02/calendar.aspx" title="Berlin" id="Berlin"&gt;
                        &lt;a href="/sites/00172/Lists/Calender03/calendar.aspx" title="Coburg" id="Coburg"&gt;
                        &lt;a href="/sites/00172/Lists/Calendar04/calendar.aspx" title="Hallstadt-Bamberg" id="Hallstadt-Bamberg"&gt;
            &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>After Saving in Sharepoint:</strong>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>            &lt;style unselectable="on"&gt;
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #map {
width:663px;
height:715px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Bremen {
position:absolute;
width:37px;
height:53px;
top:83px;
left:209px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Berlin {
position:absolute;
width:35px;
height:55px;
top:118px;
left:516px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Coburg {
position:absolute;
width:41px;
height:54px;
top:605px;
left:382px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Hallstadt-Bamberg {
position:absolute;
width:43px;
height:51px;
top:209px;
left:83px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Bremen:hover {

}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Berlin:hover {

}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Coburg:hover {

}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Hallstadt-Bamberg:hover {

}
&lt;/style&gt;
 </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="map" unselectable="on"&gt;
                        &lt;a title="Bremen" id="Bremen" href="/sites/00172/Lists/Calendar01/calendar.aspx" unselectable="on"&gt;
                        &lt;/a&gt;&lt;a title="Berlin" id="Berlin" href="/sites/00172/Lists/Calendar02/calendar.aspx" unselectable="on"&gt;
                        &lt;/a&gt;&lt;a title="Coburg" id="Coburg" href="/sites/00172/Lists/Calendar03/calendar.aspx" unselectable="on"&gt;
                        &lt;/a&gt;&lt;a title="Hallstadt-Bamberg" id="Hallstadt-Bamberg" href="/sites/00172/Lists/Calendar04/calendar.aspx" unselectable="on"&gt;
            &lt;/a&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>