CODEWITHSUNDEEP
phpcsshtml-email
AltTab
AltTab

Reputation: 65

Using CSS in HTML emails sent using PHP

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.

Upvotes: 1

Views: 8108

Answers (5)

Amru E.
Amru E.

Reputation: 2118

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.

Upvotes: 2

rpkamp
rpkamp

Reputation: 811

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.

Upvotes: 0

user557846
user557846

Reputation:

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.

Upvotes: 0

jonayreyes
jonayreyes

Reputation: 578

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>";
?>

Upvotes: 1

Marc B
Marc B

Reputation: 360662

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.

Upvotes: 3

Related Questions