+ Start a Discussion
SFDC coderSFDC coder 

Css styles not applied in VF email template when rendered as pdf

hi all,

i am creating an VF email template wherein i am sending an attachment in pdf format.However the styling that i am applying through css is not working.
can anyone help me?below is my code

<messaging:emailTemplate subject="{!relatedTo.Business_Partner__c}confirm next visit date please" 
                         recipientType="User"
                         relatedToType="Order__c">
                       
<messaging:htmlEmailBody >
    <html>
    <head>
    <style>
    table,td,th{border-style: groove;  border-collapse: collapse;}
    </style>
    </head>
        <body>
        <center><apex:image value="{!$Resource.MaxxiumHeader}" alt="header"/></center>
        <p>Dear {!relatedTo.Contact_Person__r.name},</p>
        <p>I would like to confirm our Product Order detail</p>
        
        <table>
        <tr>
           <th>Product Name</th>
           <th>Product Brand</th>
           <th>Product Category</th>
           <th>Net Price</th>
        </tr>
      
        </table>
        <p>Thank you for your confirmation.</p>
        <p>Kind Regards,</p>
      
        </body>
    </html>
</messaging:htmlEmailBody>
 
<messaging:attachment renderAs="PDF">

<head>
<style type="text/CSS">
 .colorStyle
 {
     background-color=#A0A0A0;
 }
</style>
</head>
<body>
 <div>
  <apex:outputText styleClass="colorStyle">Wholesaler Information         </apex:outputText>
   <apex:repeat value="{!relatedTo.Wholesaler__r}" var="acc">
    <tr><td>Name</td><td>{!acc.name}</td></tr>
    <tr><td>Fax</td><td>{!acc.Fax}</td></tr>    
  </apex:repeat>
 </div>

  </body>

</messaging:attachment>
</messaging:emailTemplate>


RamuRamu (Salesforce Developers) 
This article might help

https://developer.salesforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce
shiv@SFDCshiv@SFDC
.colorStyle
 {
     background-color=#A0A0A0;
 }

// There is a mistake in this code. you should write this way

.colorStyle
 {
     background-color: #A0A0A0;
 }
If this answer resolve your issue, please mark it as solution.
nitesh gadkarinitesh gadkari
Hi,

You need to use inline CSS.
Vijay Kumar YadavVijay Kumar Yadav
I had used inline CSS but still CSS effects are not seen in pdf