How to add css into xsl file?

Question

I have following xml file:

<GeneralAgenda xmlns="http://schemas.gov.sk/form/Notify.GeneralAgenda/1.1">
  <subject>Lorem Ipsum is simply dum</subject>
  <text>VLorem Ipsum is simply dummy text</text>
</GeneralAgenda>

From this i have created following xsl file:

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


<xsl:template match="GeneralAgenda">
  <html>
   <head>

    </head> 
  <body>

   <div id="main" class="layoutMain">
      <div class="layoutRow ui-tabs ui-widget-content">
         <div class="caption ui-widget-header">
            <div class="headercorrection">Lorem Lorem</div>
         </div>

         <div><label class="labelVis">Bla bla: </label>

           <span class="contentVis wordwrap">

             <xsl:value-of select="subject"/>

           </span>

        </div>

         <div class="clear"> </div>
         <div><label class="labelVis">Text: </label>
           <span class="contentVis wordwrap">

            <xsl:value-of select="text"/>

           </span>
         </div>
         <div class="clear"> </div>
      </div>
   </div>

  </body>

  </html>
</xsl:template>

</xsl:stylesheet>

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:

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 > .caption { border: 0px !important; }
.nocaption > .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;
}

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.

What is the possible solution for this?

You say your current XSLT works fine, but your XML has a default namespace xmlns="http://schemas.gov.sk/form/Notify.GeneralAgenda/1.1", which you have not accounted for in your XSLT. This means the template match <xsl:template match="GeneralAgenda"> is not actually going to match anything, and so you won't get any of the html inside the template being output. — Tim C
– Tim C, Commented Mar 16, 2018 at 10:08
so what should i put in <xsl:template match="GeneralAgenda">? — vikino
– vikino, Commented Mar 16, 2018 at 10:11
You need to declare the namespace in your XSLT as xmlns:ga="http://schemas.gov.sk/form/Notify.GeneralAgenda/1.1". Then change the template match to <xsl:template match="ga:GeneralAgenda">. See xsltfiddle.liberty-development.net/nbUY4kA. When you have done that, you can use Rupesh's answer to add in the CSS as you asked. — Tim C
– Tim C, Commented Mar 16, 2018 at 10:29

Rupesh_Kr · Accepted Answer · 2018-03-16 10:20:22Z

3

Process 1 : Put your css in between head element as

<head>
<style type="text/css">
   ....
 </style>
</head>

Process 2: save css file in your local and call it in between head element

<head>
  <link href="{CSSName}.css" rel="stylesheet" type="text/css">
</head>

edited Mar 16, 2018 at 10:20

answered Mar 16, 2018 at 10:06

Rupesh_Kr

3,4572 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rupesh_Kr Over a year ago

@WaqasBukhary :), it is just typing, also html is not case-sensative

Rupesh_Kr Over a year ago

@TimC it is an editing error as edited by WaqasBukhary.

Andrew Truckle Jun 19 at 16:13

Yes, it annoying that the css part is all left aligned when you format the XSL file. Annoys my ocd 😀

Collectives™ on Stack Overflow

How to add css into xsl file?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related