Embedding css in xslt

Friday, November 16, 2012 12:49 PM

I am sending some information via email with body as html

In that body i am transforming some data via dataset into my required info

What i needed is that there should be some css should also be added there

As this is going in email i can't reference external css style sheet.So i wanted to embed the css in
my xslt

Both xslt and css are given below

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="1.0" encoding="UTF-16" indent="yes" omit-xml-declaration="yes"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        wanted to put css
      </head>
      <body>
        <table align="center" width="1024" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <table align="center" width="100%" cellpadding="0" cellspacing="0" >
                <tr>
                  <td>
                    <h3 class="h3">
                     My Heading
                    </h3>
                  </td>
                </tr>
                <tr>
                  <td>
                    <xsl:fallback xml:space="default">
                    </xsl:fallback>
                    <xsl:apply-templates />
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  </xsl:template>
  <xsl:template match="NewDataSet">
    <p>
      <xsl:if test="TestInfo">
        <br />
        <table border="0" cellpadding="2" cellspacing="0" bordercolor="#CCCCCC" colspan="1"
                    width="100%">
          <tr>
            <td class="lang-heading">
             Location
            </td>
            <td class="lang-heading">
              ABCColumn
            </td>
            <td class="lang-heading">
             "XYZ
            </td>           
          </tr>
          <xsl:apply-templates select="TestInfo" />
        </table>
      </xsl:if>
    </p>
  </xsl:template>
  <!-- ................................................-->
  <xsl:template match="TestInfo">
    <tr>      
        <xsl:value-of select="Location" />
      </td>
      <td class="item-values">
        <xsl:value-of select="ABCColumn" />
      </td>      
      <td class="item-values">
        <xsl:value-of select="XYZ" />
      </td>
    </tr>
  </xsl:template>
</xsl:stylesheet>






h3.h3
{
    padding-left: 5px;
}


td.lang-heading
{
    font-family: Verdana;
    font-size: 10pt;
    font-weight: bold;
    color: Black;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid Black;
}

td.lang-values-left
{
    background-color: #BFDCE0;
}


td.item-values
{
    font-family: Verdana;
    font-size: 10pt;
    color: Black;
    vertical-align: top;
    border-bottom: 1px solid Black;
}

.grid-bg-0
{
    background-color: white;
}
.grid-bg-1
{
    background-color: #D9F1F5;
}
h3.h3
{
    padding-left: 5px;
}


td.lang-heading
{
    font-family: Verdana;
    font-size: 10pt;
    font-weight: bold;
    color: Black;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid Black;
}

td.lang-values-left
{
    background-color: #BFDCE0;
}


td.item-values
{
    font-family: Verdana;
    font-size: 10pt;
    color: Black;
    vertical-align: top;
    border-bottom: 1px solid Black;
}

.grid-bg-0
{
    background-color: white;
}
.grid-bg-1
{
    background-color: #D9F1F5;
}

Kamran Shahid Principle Engineer Development (MCP,MCAD,MCSD.NET,MCTS,MCPD.net[web])

All Replies

Friday, November 16, 2012 1:44 PM

0
Your XSLT creates (X)HTML and that allows CSS inline, simply with e.g.

<head>

     <style type="text/css">

     h3.h3
{
    padding-left: 5px;
}

td.lang-heading
{
    font-family: Verdana;
    font-size: 10pt;
    font-weight: bold;
    color: Black;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid Black;
}

td.lang-values-left
{
    background-color: #BFDCE0;
}

td.item-values
{
    font-family: Verdana;
    font-size: 10pt;
    color: Black;
    vertical-align: top;
    border-bottom: 1px solid Black;
}

.grid-bg-0
{
    background-color: white;
}
.grid-bg-1
{
    background-color: #D9F1F5;
}
h3.h3
{
    padding-left: 5px;
}

td.lang-heading
{
    font-family: Verdana;
    font-size: 10pt;
    font-weight: bold;
    color: Black;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid Black;
}

td.lang-values-left
{
    background-color: #BFDCE0;
}

td.item-values
{
    font-family: Verdana;
    font-size: 10pt;
    color: Black;
    vertical-align: top;
    border-bottom: 1px solid Black;
}

.grid-bg-0
{
    background-color: white;
}
.grid-bg-1
{
    background-color: #D9F1F5;
}

</style>

</head>

so all you need to do is put that CSS you have in there in a "style" element in the "head" section of the HTML the XSLT creates.
MVP Data Platform Development My blog
- Marked As Answer by Kamran Shahid Friday, November 16, 2012 2:34 PM
- Reply
- Quote
Friday, November 16, 2012 1:54 PM

0
I have tried it before but it was giving some sort of error previously.Now working like a charm.

Thanks
- Edited by Kamran Shahid Friday, November 16, 2012 1:59 PM
- Reply
- Quote