Using XSLT to design XML data and display the XML data on HTML div

For example, this HTML code will be a different file from XSLT.

<div id="showProduct"> </div>

XSLT code example

<xsl:template match="x:div[@id='showProduct']">
<xsl:for-each select="PRODUCTS/product[1]">
  <div style="background-color:teal;color:white;padding:4px">
    <span style="font-weight:bold"><xsl:value-of select="name"/> - </span>
    <xsl:value-of select="product_desc"/>
    </div>
</xsl:for-each>

XML code

<PRODUCTS>

  <product id = "1">
    <name>Bob Dylan 1</name>
    <product_desc>Ever man are put down his very. And marry may table him avoid. Hard sell it were into it upon.
       He forbade affixed parties of assured to me windows. Happiness him nor she disposing provision.
      State thing might stand one his plate. Offending or extremity therefore so difficult he on provision. Tended depart turned not are. </product_desc>
  </product>

</PRODUCTS>

This reason being I want to do this is because I have already created a HTML page but by moving my HTML to a XSLT file many things wouldn't work because I have separate javascript files and CSS files for another component in the HTML file.

I would like to know what should I do to be able to present my information in HTML file using XML and XSLT to change the style. Thanks in advance!