applying CSS in HTML mail with PHP

Question

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,

Which devices / email clients are you testing on? CSS support in email clients is very limited. — MrWhite
– MrWhite, Commented Jul 30, 2015 at 9:57
Internal CSS does not working in email , you have to right in-line css for email . Like <div style="background-color:#333; ....." >source code goes here</div> — Noman
– Noman, Commented Jul 30, 2015 at 9:58
Check out The Ultimate Guide to CSS - it states that Outlook 2013 supports style blocks in the head and simple class selectors, but it does not support child selectors (>) and there is no mention of "multiple" classes. But as suggested in that guide, and the other answers here, if you need wider support then unfortunately it's "back to basics" as far as CSS in email is concerned. — MrWhite
– MrWhite, Commented Jul 30, 2015 at 10:19

Stewartside · Accepted Answer · 2015-07-30 09:59:59Z

4

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.

answered Jul 30, 2015 at 9:59

Stewartside

21k13 gold badges64 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rjcode Over a year ago

Yes, i jst fwd mail to apple mail, it shows css applied, but not in outlook :-(

Amit Rana · Accepted Answer · 2015-07-30 10:03:33Z

2

email clients not support css..

Only way is to right inline styles..

answered Jul 30, 2015 at 10:03

Amit Rana

1905 bronze badges

1 Comment

Sheikh Wahab Mahmood Over a year ago

It is easy to manage your code if you put your styling elements in style tab like: <style> element{color: red;}</style> but most features of CSS in email view are limited. E.g. you cannot use justify-content or align-items with display: flex because CSS 3 is still being used.

read · Accepted Answer · 2016-02-17 16:25:32Z

2

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="".

edited Feb 17, 2016 at 16:25

answered Jul 30, 2015 at 9:59

read

3506 silver badges14 bronze badges

Collectives™ on Stack Overflow

applying CSS in HTML mail with PHP

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related