CODEWITHSUNDEEP
htmlcss
Abdul Azeez
Abdul Azeez

Reputation: 63

Need help on CSS Styling for Email Template

I have designed a Email Template that we are going to use for one of our client. When i see it from the System Preview i am able to see the color but once email is received the format is set but color is not visible it is displaying as Black & White photo without any colors in the body.

Below is my CSS Code:

<p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;">&nbsp;<img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
<style><!--
table {
font-family: cambria;
}
td.bg1{
background-color:#E2E2E3;
color:#00629F;

}
td.bg2{
color:black;
}
--></style>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p>Click here to view Incident: ${URI_REF}</p>
</td>
</tr>
<tr>
<td class="bg1" colspan="5">Short Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${short_description}</td>
</tr>
<tr>
<td class="bg1" colspan="5">Description</td>
</tr>
<tr>
<td class="bg2" colspan="5">${description}</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
<p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span>&nbsp;</span></span></p>

Output when i previewed in the System: System Preview Email

Once it is received to outlook then the email i am getting as shown Outlook Email

Upvotes: 0

Views: 70

Answers (1)

MK Vimalan
MK Vimalan

Reputation: 1298

There is no any big mistake in your code, Please arrange your code properly. Table data color not shown because the style property not consuming. In your code you put the style tag as alone, Please move your style tag into head tag. The code will be work fine.

<head>
   <style>
      table {
      font-family: cambria;
      }
      td.bg1{
      background-color:#E2E2E3;
      color:#00629F;
      }
      td.bg2{
      color:black;
      }
   </style>
   </head
<body>
   <p style="text-align: left;"><span style="font-family: cambria;"> <span style="font-size: 18pt;"> <span style="color: #00629f;">IBM Service Desk</span> </span> </span> <span style="font-family: cambria;">&nbsp;<img style="align: right;" title="" src="sys_attachment.do?sys_id=0d50b5462f49c010209857892799b644" alt="" width="60" height="60" align="right" border="" hspace="" vspace="" /></span></p>
   <style>
   </style>
   <table style="width: 100%;">
      <tbody>
         <tr>
            <td style="height: 40px;" colspan="5">
               <p>Click here to view Incident: ${URI_REF}</p>
            </td>
         </tr>
         <tr>
            <td class="bg1" colspan="5">Short Description</td>
         </tr>
         <tr>
            <td class="bg2" colspan="5">${short_description}</td>
         </tr>
         <tr>
            <td class="bg1" colspan="5">Description</td>
         </tr>
         <tr>
            <td class="bg2" colspan="5">${description}</td>
         </tr>
      </tbody>
   </table>
   <hr />
   <p><span style="font-family: cambria;"><span style="font-size: 12pt;">Thank you</span>,</span></p>
   <p><span style="font-family: cambria;"><span style="font-size: 14pt;"><span style="color: #00629f;">IBM Service Desk</span>&nbsp;</span></span></p>
</body>

Upvotes: 1

Related Questions