CODEWITHSUNDEEP
phphtmlcss
rjcode
rjcode

Reputation: 1349

applying CSS in HTML mail with PHP

I am trying to create HTML email template which will be send using PHP,

I have created template like below,

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Notification email template</title>
<style type="text/css">

.portlet.box.blue-hoki {
border: 1px solid #869ab3;
border-top: 0;
}

.portlet.box.blue-hoki > .portlet-title {
background-color: #67809F;
}

.portlet.box.blue-hoki > .portlet-title > .caption {
color: #FFFFFF;
}

</style>
</head>

<body>

<div class="portlet box blue-hoki">
        <div class="portlet-title">
          <div class="caption" >
            Report # {report_id} is {action}
          </div>
         </div>
</div>
</body>

When email sent, unfortunately there are no CSS applied to div contents, but if i plut style tag in div and put all style properties in div, then it get it correct,

I could not able to find why class css is not applying to email when defined as class,

Any advice?

Thanks,

Upvotes: 3

Views: 1902

Answers (3)

read
read

Reputation: 350

I also had this problem, sending emails to gmail users. Gmail doesn't read the styles inside <style> my solution was to make the styles inside the elements using style="".

Upvotes: 2

Amit Rana
Amit Rana

Reputation: 190

email clients not support css..

Only way is to right inline styles..

Upvotes: 2

Stewartside
Stewartside

Reputation: 20905

There are some thins you can, and cannot do within emails using HTML/CSS.

  • One being using <head></head> with styles set. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.

  • Link to an external stylesheet. Not many email clients support this, best to just forget it.

What you are going to have to do is put all of your stylings inline to the elements you want. So like this:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Notification email template</title>
</head>
<body>
  <div style="border: 1px solid #869ab3;border-top: 0;">
    <div style="background-color: #67809F;">
      <div style="color: #FFFFFF;">
        Report # {report_id} is {action}
      </div>
    </div>
  </div>
</body>

I would recommend reading the blog posted on CSS-Tricks (Using CSS in HTML Emails) which gives you a much bigger overview of what you can and cannot do and how to best do things.

Upvotes: 4

Related Questions