16

I want to send a HTML page that contains CSS stylesheet to an email account. The problem is that the CSS style sheet is not visible at all. Do I have to inline every CSS styling? It seems to be highly inefficient method. Any others ideas ?

Below is the PHP code for sending the email :

<?php
$to = "myaccount@gmail.com";

// subject
$subject = "Test mail";

// message
$message = file_get_contents("index.html");

// from
$from = "myaccount@gmail.com";

// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= "From:" . $from;

// Mail it
mail($to,$subject,$message,$headers);

echo "Mail Sent.";
?>

I would greatly appreciate your help. Thanks in advance.

Wijden
  • 511
  • 6
  • 11
  • 23
  • 13
    Yes, you need to use inline CSS. Most email services such as Google (especially) will trash external CSS. – Funk Forty Niner Dec 17 '13 at 15:04
  • 10
    When writing HTML for Emails, think of the Internet in 1996. – MackieeE Dec 17 '13 at 15:05
  • I usually embed my styles in a sheet in the `` for emails and then refer to the classes for element inline. – Crackertastic Dec 17 '13 at 15:07
  • @MackieeE nested frames, tables, marquees, under construction gifs, blinking text? – Kenny Thompson Dec 17 '13 at 15:07
  • 1
    You can technically re-render your email before sending. Just load grab the HTML doc, create tags in there, and grab the contents of your CSS file and put it in between. This will give the same result, but should be a lot faster, easier and more generic than re-writing all your emails :S – Viridis Dec 17 '13 at 15:08
  • you can mine encode attach a stylesheet into an email and link it in using the src [CID:128397469876234] style thingie (can't remember the correct term for it) – Dave Dec 17 '13 at 15:09
  • If you're using this for a newsletter or something similar, it's also good practice to include a link/text to the affect of `"Email not displaying properly?"` where you can setup a page with an external stylesheet, with no limitations. – Funk Forty Niner Dec 17 '13 at 15:14
  • @KennyThompson Well, some of that hehe ;) – MackieeE Dec 17 '13 at 15:19
  • 1
    Here are some [CSS inlining tools](http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057) that can help relieve some of your pain. – John Dec 17 '13 at 15:59

4 Answers4

3

Google, Outlook, Yahoo all the major email service providers do not allow CSS external files. It may sound antiquated that they have opted for inline styles and tables to render a proper email message with any styling.

It may be tedious to code but companies like https://litmus.com/ and envato will help with some templates and formatting issues.

my 2¢'s: email providers can't trust all sources of information being sent and so this is a way of keeping the malicious code at bay.

JFly28
  • 101
  • 2
  • 9
2

It would be best to just put a <style> block with all the CSS inside it somewhere in the index.html body. Some email clients/portals cut all the CSS embedded in the header with <link rel="stylesheet" type="text/css" href="..." >. As a result not using inline CSS may cause your emails to appear 'broken' or simply look bad on accounts with @gmail.com for example.

LuFFy
  • 8,799
  • 10
  • 41
  • 59
Виктор Иванов
  • 377
  • 1
  • 12
1

Within your index.html file, include a <style> tag as below. 

<style>
.class{
style: attribute; 
}
</style>";

That should work, if not then I may recommend hosting your stylesheet on a website and including a <link> tag similar to the one below in the head of your index file

<link rel='stylesheet' type='text/css' href='http://www.yourstylesheet.com'>";

Either of those methods should help with your problem.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Kyle Papili
  • 419
  • 1
  • 7
  • 16
0

Just embed the css-code into the <head> of that html-email.

Roman
  • 2,530
  • 2
  • 27
  • 50