CODEWITHSUNDEEP
csshtml-email
Almas Adilbek
Almas Adilbek

Reputation: 4410

How to build HTML email using CSS?

Can I just build html email as usually we build html pages?
I want to set email body as a string of all html codes.

Email body offcourse will be complex, so I need to use a lot of CSS to build one page html email.

What should I do?
Where to store css codes?
Can I just include external .css file from my server?

Upvotes: 3

Views: 2467

Answers (4)

mVChr
mVChr

Reputation: 50205

Campaign Monitor has a great resource for what CSS is and isn't available in various e-mail clients: http://www.campaignmonitor.com/css/

In general after examining this chart you'll find that best practices for building HTML/CSS emails is very different than best practices for web pages.

Upvotes: 1

selbie
selbie

Reputation: 104589

Set the Content-Type header to text/html to send HTML mail.

You are better off inlining the CSS style directly into the HTML. Or just using the "style" attribute on the elements that need styling. Most mail clients, for security reasons, will not render external images and styles by default. I know you can attach images into the mail (or opt to have them on a remote server - but with the caveat the the mail app will prompt the user to download). You might be able to have .css files as attachments.

Most clients that send HTML mail also use the multipart/alternative MIME format. Non HTML-clients can still render the mail as plain text if they receive the mail like that.

Here is a real example mail that demonstrates this

Return-Path: <[email protected]>
Received: from selbiepc (11-11-111-11.foob.ga.baloneynet.net [11.11.111.11])
        by mx.foobar.com with ESMTPS id f2sm4177017ybh.22.2011.03.27.22.24.02
        (version=SSLv3 cipher=OTHER);
        Sun, 27 Mar 2011 22:24:03 -0700 (PDT)
Message-ID: <11111111111111111111111111111111@selbiepc>
From: "Selbie" <[email protected]>
To: <[email protected]>
Subject: mail with html in it
Date: Sun, 27 Mar 2011 22:23:33 -0700
MIME-Version: 1.0
Content-Type: multipart/alternative;
    boundary="----=_NextPart_000_0011_01CBECCD.9BE136B0"
X-Priority: 3
X-MSMail-Priority: Normal
Importance: Normal


This is a multi-part message in MIME format.

------=_NextPart_000_0011_01CBECCD.9BE136B0
Content-Type: text/plain;
    charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

This is an HTML mail with various formatting in it.  It will still =
render fine by non-html clients.




------=_NextPart_000_0011_01CBECCD.9BE136B0
Content-Type: text/html;
    charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

<HTML><HEAD></HEAD>
<BODY dir=3Dltr>
<DIV dir=3Dltr>
<DIV style=3D"FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: 12pt">
<DIV>This is an <STRONG>HTML mail</STRONG> with <FONT =
color=3D#ff0000>various=20
formatting</FONT> in it.&nbsp; It will still render <FONT=20
size=3D2><EM>fine</EM></FONT> by non-html <U>clients</U>.</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV></DIV></DIV></BODY></HTML>

------=_NextPart_000_0011_01CBECCD.9BE136B0--

Upvotes: 1

Jarrett Widman
Jarrett Widman

Reputation: 6439

Even though it sounds totally backwards and not what I'd recommend for web pages, the best way to use css in emails is all inline in style attributes. The reason is that a lot of email applications and particularly web mail like gmail, yahoo, hotmail, etc. will not respect your css class declarations and will often strip out all of your css unless it is inline. A lot of the time the entire <head> gets removed and very often the <body> tag is removed if you include that in your email.

If you are just getting started creating HTML emails I would strongly suggest using Litmus or doing manually testing on a variety of email clients. Litmus or another similar service will save you a lot of time though.

Upvotes: 4

x2.
x2.

Reputation: 9668

You can include exteranal css files but it only works when net connected, better to include css inline.

Upvotes: 1

Related Questions