title: How to add css into xsl file?
body: <p>I have following xml file:</p>
  
  <pre><code>&lt;GeneralAgenda xmlns="http://schemas.gov.sk/form/Notify.GeneralAgenda/1.1"&gt;
    &lt;subject&gt;Lorem Ipsum is simply dum&lt;/subject&gt;
    &lt;text&gt;VLorem Ipsum is simply dummy text&lt;/text&gt;
  &lt;/GeneralAgenda&gt;
  </code></pre>
  
  <p>From this i have created following xsl file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
  
  
  &lt;xsl:template match="GeneralAgenda"&gt;
    &lt;html&gt;
     &lt;head&gt;
  
      &lt;/head&gt; 
    &lt;body&gt;
  
     &lt;div id="main" class="layoutMain"&gt;
        &lt;div class="layoutRow ui-tabs ui-widget-content"&gt;
           &lt;div class="caption ui-widget-header"&gt;
              &lt;div class="headercorrection"&gt;Lorem Lorem&lt;/div&gt;
           &lt;/div&gt;
  
           &lt;div&gt;&lt;label class="labelVis"&gt;Bla bla: &lt;/label&gt;
  
             &lt;span class="contentVis wordwrap"&gt;
  
               &lt;xsl:value-of select="subject"/&gt;
  
             &lt;/span&gt;
  
          &lt;/div&gt;
  
           &lt;div class="clear"&gt; &lt;/div&gt;
           &lt;div&gt;&lt;label class="labelVis"&gt;Text: &lt;/label&gt;
             &lt;span class="contentVis wordwrap"&gt;
  
              &lt;xsl:value-of select="text"/&gt;
  
             &lt;/span&gt;
           &lt;/div&gt;
           &lt;div class="clear"&gt; &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  
    &lt;/body&gt;
  
    &lt;/html&gt;
  &lt;/xsl:template&gt;
  
  &lt;/xsl:stylesheet&gt;
  </code></pre>
  
  <p>Im generating html file from xml, this works fine but i don't know how to include css styling into created xsl file. I need to add this css:</p>
  
  <pre><code>body { 
      font-family: 'Open Sans', 'Segoe UI', 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
      background : #ffffff !important ;
  }
  .ui-tabs {
      padding: .2em;
      position: relative;
      zoom: 1;
  }                               
  .clear { clear: both; height: 0;}
  .layoutMain {
      margin: 0px auto;
      padding: 5px 5px 5px 5px;   
  }               
  .layoutRow { margin-bottom: 5px; }              
  .caption { /*width: 100%; border-bottom: solid 1px black;*/ }
  .nocaption &gt; .caption { border: 0px !important; }
  .nocaption &gt; .caption span {
      background: none !important;
      display: none;
  } 
  .caption .title { padding-left: 5px; }
  .headercorrection { 
      margin: 0px;
      font-size : 1em;
      font-weight: bold;
  }               
  .labelVis {
      float: left;
      font-weight: bold;
      font-family: 'Open Sans', 'Segoe UI', 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
      line-height: 25px;
      margin: 0px 18px 0px 0px;
      padding-left: 3px;
      width: 190px;
      word-wrap: break-word;all: 
      font-size: 0.8em;
  }
  .contentVis {            
      float: left;    
      line-height: 25px;
      margin: 0px;
      padding: 0px;
      vertical-align: top;
      font-size: 0.75em;          
  }
  .wordwrap { 
      white-space: pre-wrap;      
      white-space: -moz-pre-wrap; 
      white-space: -pre-wrap;     
      white-space: -o-pre-wrap;   
      word-wrap: break-word;      
  }   
  .ui-widget-content {
      background : 50% 50% repeat-x #ffffff;
      border : #d4d4d4 solid 2px;
      color : #4f4e4e;
      border-radius : 3px;
  }
  .ui-widget-header {
      cursor : pointer;
      font-size : 0.8em;
      color : #494949;
      padding-left : 2px;
      border : #eae9e8 solid 1px;
      background-color : #eae9e8;
      margin-bottom: 3px;
      border-radius : 3px;
  }   
  </code></pre>
  
  <p>I have tried to put it in head tags style but nothing happened, output was generated without styling, i also tried link tag but same result.</p>
  
  <p>What is the possible solution for this? </p>