Using CSS in HTML emails sent using PHP

Question

Im not that awesome at php to please forgivr me.

So I am sending a html email using PHP.

After some research I have built one using tables and writ a PHP sending script similar to some many of you will of used.

I know inline styling seems to be the most commonly used way to add style.

When I define my $message variable before my $headers, is something LIKE this possible?

$message = " 

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>BPN UK Contact Request</title>
    <style type="text/css">

     .exampleclass { 
       CSS Rules
     }

    </style>

    REST OF HTML LAYOUT, INCEPTION TABLES ETC ETC

"

Or do I have to go through and inline style it in the tags etc, its just that way seems a lot more work and more restricting.

Sorry if this is a stupid question.

FYI: Google/Gmail and others will strip out all your CSS, unless they're inline coded. — Funk Forty Niner
– Funk Forty Niner, Commented May 23, 2013 at 20:22

Marc B · Accepted Answer · 2013-05-23 20:22:19Z

3

That's perfectly acceptable, but realize that many web-based mail clients will replace/mangle inline CCS to prevent that css from affecting the "container" webmail site. Keep the CSS simple and don't try to go for fancy styling.

answered May 23, 2013 at 20:22

Marc B

362k44 gold badges433 silver badges508 bronze badges

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

3 Comments

Funk Forty Niner Over a year ago

I for one, learned that lesson well, some time ago (sharing the wealth) ;-)

Aaron Miller Over a year ago

Worse, modern versions of Microsoft Outlook will ignore your CSS entirely, along with almost all inline styles. As miserable as it is in every possible way, Outlook is a popular enough client that it's worth seriously considering the value of designing your emails specifically to work with it; since it has the most restricted subset of styling capabilities available in pretty much any client that renders HTML at all, you can be reasonably confident that an email which looks like it's supposed to in Outlook will do so elsewhere as well.

Funk Forty Niner Over a year ago

@AaronMiller True. Yet, there is more than 1 way to skin that Waskiwee Wabbit!

Amru E. · Accepted Answer · 2013-08-23 08:48:53Z

2

The way you did it should work just fine, but there are a few things you to keep in mind. The first is that you need to make sure to have a content-type header. This tells the browser to display the message as HTML. If you don't, you will get an email with a whole bunch of html tags as plain text. Something like this would suffice:

$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

Also, replace double quotes (") in the HTML with single quotes (') as the double quotes dictate the start and end of $message.

edited Aug 23, 2013 at 8:48

answered May 23, 2013 at 20:29

Amru E.

2,1783 gold badges18 silver badges23 bronze badges

Comments

jonayreyes · Accepted Answer · 2013-05-23 20:26:49Z

1

You coluld also try:

    <?php
   //include CSS Style Sheet
   echo "<link rel='stylesheet' type='text/css' href='path-to-css-file' />";

   //include a javascript file
   echo "<script type='text/javascript' src='path-to-javascript-file'></script>";
?>

answered May 23, 2013 at 20:26

jonayreyes

5781 gold badge10 silver badges29 bronze badges

3 Comments

AltTab Over a year ago

does that actually get noticed?

LeviZoesch Over a year ago

I was looking for a way to refactor all the CSS in the file, and was able to accomplish this by using the stylesheet method mentioned in here.

jonayreyes Over a year ago

Glad it helped @Levi!

user557846 · Accepted Answer · 2013-05-23 20:32:11Z

0

as some one who has written a few hundred email templates for work i recommend only ever use in-line css for email if you want to maximise compatibility, and send the plain text version to.

answered May 23, 2013 at 20:32

user557846

Comments

rpkamp · Accepted Answer · 2013-05-23 20:34:35Z

0

Yes everything needs to be inline, but indeed that's very clumsy and not very DRY.

At work we're using the class InlineStyle that allows you to put all the CSS in the <head> of the document like you normally do, and then you can use the class to parse the HTML and CSS and convert all the CSS in the head to inline styles. So you get inline styles, but you write the HTML like you normally would with CSS in the <head>. Works very well.

answered May 23, 2013 at 20:34

rpkamp

8215 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using CSS in HTML emails sent using PHP

5 Answers 5

3 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related