external css not getting applied in html email [XSLT to html creation ]

Question

I am generating an html from xslt then sending that html to email In my email css mentioned in the html not getting applied when i view email. My xslt is

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8" omit-xml-declaration="yes" indent="yes" />
  <xsl:param name="FullName" />
  <xsl:param name="Url" />
  <xsl:param name="SiteRoot" />

  <xsl:template match="/">
    <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html></xsl:text>
    <html class="AR">
      <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta http-equiv="content-language" content="en" />
        <xsl:element name="link">
          <xsl:attribute name="href">
            <xsl:value-of select="$SiteRoot"/>
            <xsl:text>Common/Stylesheets/EmailTemplates_en_gb.css</xsl:text>
          </xsl:attribute>
          <xsl:attribute name="rel">
            <xsl:text>stylesheet</xsl:text>
          </xsl:attribute>
        </xsl:element>
      </head>
      <body>
        <div class="Email">
          <div class="TopSection">
            <a href="javascript:void(0)" class="Logo"></a>
            <img>
              <xsl:attribute name="src">
                <xsl:value-of select="$SiteRoot"/>
                <xsl:text>Common/Images/top-banner.gif</xsl:text>
              </xsl:attribute>
            </img>
          </div>
          <div class="Text">
            <p>
              <strong>
                Hi <xsl:value-of select="$FullName" />,
              </strong>
            </p>                  
        </div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

If I get string of the html and try to view that html in some sample html page i view properly applied css. My css has some background image, some fonts setting e.t.c. Also in email though i can able to see my top-banner image On .net part my code looks like following

    var results = new StringWriter();            
    var stringReader = new StringReader((new DataSet().GetXml()));
    var reader = XmlReader.Create(stringReader);
    var xpathDoc = new XPathDocument(reader);
    var transform = new XslCompiledTransform();
    transform.Load(Server.MapPath(Settings.AdminCoordinatorAddEditTemplatePath));



    var argsList = new XsltArgumentList();
    argsList.AddParam("FullName", "", coordinator.FullName);
    argsList.AddParam("Url", "", strUrl);
    argsList.AddParam("SiteRoot", "", Settings.DomainUrl);
    transform.Transform(xpathDoc, argsList, results);



    return results.ToString();

Are you setting the content type of the email message? By default, it will be text. You have to explicitly set the format as HTML. See this question for example, http://stackoverflow.com/a/7873201/4525 — harpo, Jul 03 '14 at 19:30
Yes i have set it. Also as commented it earlier if i put some image inline it is also rendering. Just the external css not getting applied — Kamran Shahid, Jul 04 '14 at 04:23

score 0 · Answer 1 · answered Jun 15 '15 at 02:47

In addition to setting

MailMessage.IsBodyHtml = true;

Emails only use inline css.

External css files are not present when viewing an email.
The header tag is not included when rendering an email so the styles tag is not included.

For example, instead of

<div class="TopSection">

it would need to be something like

<div style="font-weight:bold;font-size:1.7em;">

external css not getting applied in html email [XSLT to html creation ]

1 Answers1