Question

I am unable to see CSS styles when the following html page is emailed(Yahoo/Gmail) using mutt.I just see a plain table.But I get desired styling when viewed it in a browser. Why is that so ? Am I missing something ?

mutt -e "set content_type=text/html" me@mail.com -s "Test" < Test.html

Test.html

<!DOCTYPE html>
<html>
<head>
<style>
rd{ color: red; }
gn{ color: green; }
body { background-color:#E0E0E0; font-family: helvetica;font-size: 15px;}
</style>
</head>
<body>
<table border="1" align ="left">
<tr><th>No.</th><th>Item</th></tr>
<tr><td>1</td><td><gn>abc</gn></td></tr>
<tr><td>2</td><td><rd>ghi</rd></td></tr>
</table>
</body>
</html>
Was it helpful?

Solution

html-email is very limited to the point where even div and p tags don't always act as expected. Trying to create your own tags is simply asking for trouble.

Your two table cells should look like this instead:

<tr><td>1</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#007700;">abc</td></tr>
<tr><td>2</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#770000;">ghi</td></tr>

In addition to always inlining your CSS, you need to use the 6-digit hex color for maximum email client support. You must also re-declare your font styles in every table cell. Redundant as it is, unfortunately that is what is needed in html-email.

Don't forget the font stack also, as you are currently assuming the reader has Helvetica installed.

OTHER TIPS

The way to include CSS in an HTML email is to use inline styles.

    <!DOCTYPE html>
    <html>
    <body style='background-color:#E0E0E0; font-family: helvetica;font-size: 15px;'>
        <table border="1" align="left" style="color:red;">
            <tr><th>No.</th><th>Item</th></tr>
            <tr><td>1</td><td><gn>abc</gn></td></tr>
        </table>
    </body>
    </html>

Ref: http://www.htmlgoodies.com/beyond/css/article.php/3679231

You may need to have a look at this tutorial Getting Started with HTML Emails on tutsplus this is an old tutorial but really helpful one.

best of luck.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top