How does CSS formatting in a Google Maps bubble work?

<Placemark>
    <name />
    <description>
        <![CDATA[
            <div class="MapPopup">
                <h6>Concession</h6>
                <h4>~Name~</h4>
                <p>Description goes here</p>
                <a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
            </div>
        ]]>
    </description>
    <styleUrl>#masterPolyStyle</styleUrl>
    ...Placemarks go here ...
</Placemark>

div.MapPopup { background:pink; }

<div style="font-family: Arial,sans-serif; font-size: small;">
    <div id="iw_kml">
        <div>
            <h6>Concession</h6>
            <h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
            <p>
                Description goes here</p>
            <a target="_blank"><span />View details </a>
        </div>
    </div>
</div>

/*start of myHtml2 variable*/
var myHtml2 = "<div style="background-color:lightgray"><div style="padding:5px"><div
style="font-size:1.25em">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style="padding:5px"><tr><td><img src="A lake.jpg"
width="75px" height="50px"></td><td>More text<br/>Again, more text<br/><div
style="font-size:.7em">Last text</div></td></tr></table></div></div>"
/*end of variable*/

var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
 /*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){
infowindow2.open(map, marker);
});