Building Custom Email Templates with HTML and CSS in Python
: This tag is used to define a cell inside a row. It contains content like images, text, buttons, etc.
Step 2: Structure Your Email
Now, let’s create the structure of your HTML email. To ensure it’s compatible with different email clients, use tables to generate a custom email layout, instead of CSS.
<table width=”100%” cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center”>
<table width=”600″ cellpadding=”0″ cellspacing=”0″ style=”border: 1px solid #1c3f60; padding: 20px;”>
<tr>
<td align=”center”>
<h1 style=”color: #7ed957;”>Hi, Jon!h1>
<p style=”font-size: 16px; color: #ffde59;”>Thank you for being our valuable customer!p>
td>
tr>
table>
td>
tr>
table>
Styling the Email with CSS
Once you’ve defined your email structure, let’s start designing emails with HTML and CSS:
Inline CSS
Use inline CSS to ensure different email clients render CSS accurately and preserve the intended aesthetics of your email style.
<p style=”font-size: 16px; color: blue;”>Styled paragraph.p>
Adjusting Style
Users might use different devices and screen sizes to view your email. Therefore, it’s necessary to adapt the style to suit various screen sizes. In this case, we’ll use media queries to achieve this goal and facilitate responsive email design.
<style type=”text/css”>
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
padding: 10px !important;
}
}
style>
<table class=”container” width=”600″>
table>
Explanation:
- @media screen and (max-width: 600px) {….}: This is a media query that targets device screens of up to 600 pixels, ensuring the style applies only to these devices, such as tablets and smartphones.
- width: 100% !important;: This style changes the width of the table – .container. The code instructs that the table width be set to full screen, not 600px.
- !important: This rule overrides other styles that may conflict with it.
- padding: 10px !important;: Inside the .container table, a padding of 10px is added to the table.
Adding CTA Button and Links
Here, we are adding a call to action (CTA) link at the button – “Get a 30-day free trial” that points to this page –
<table cellpadding=”0″ cellspacing=”0″ style=”margin: auto;”>
<tr>
<td align=”center” style=”background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;”>
<a href=” target=”_blank” style=”color: #ffffff; text-decoration: none; font-weight: bold;”>Get a 30-day free triala>
td>
tr>
table>
Let’s Now Look at the Complete HTML Email Template:
html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>HTML Email Templatetitle>
<style type=”text/css”>
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
}
.mailcontainer {
width: 100%;
max-width: 600px;
margin: auto;
background-color: #ffffff;
}
.header {
background-color: #1c3f60;
color: #ffffff;
text-align: center;
padding: 20px;
}
.body {
padding: 20px;
font-size: 16px;
line-height: 1.6;
background-color: #1c3f60;
color: #7ed957;
}
.footer {
background-color: #ff6100;
color: #000000;
text-align: center;
padding: 20px;
}
.cta {
background-color: #8c52ff;
padding: 10px 20px;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
padding: 10px !important;
}
}
style>
head>
<body>
<table width=”100%” cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center”>
<table class=”container” width=”600″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td class=”header”>
<h1>Your order is confirmedh1>
td>
tr>
<tr>
<td class=”body”>
<p>The estimated delivery date is 22nd August 2024.p>
<p style=”font-size: 16px; color: blue;”>Styled paragraph.p>
<table width=”100%” cellpadding=”0″ cellspacing=”0″ style=”border: 1px solid #1c3f60; padding: 20px;”>
<tr>
<td align=”center”>
<h1 style=”color: #7ed957;”>Hi, Jon!h1>
<p style=”font-size: 16px; color: #ffde59;”>Thank you for being our valuable customer!p>
td>
tr>
table>
<table cellpadding=”0″ cellspacing=”0″ style=”margin: auto;”>
<tr>
<td align=”center” style=”background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;”>
<a href=” target=”_blank” rel=”noopener noreferrer” style=”color: #ffffff; text-decoration: none; font-weight: bold;”>Get a 30-day free triala>
td>
tr>
table>
td>
tr>
<tr>
<td style=”background-color: #ff6100; color: #000000; text-align: center; padding: 20px;”>
<p>For additional help, contact us at [email protected]p>
td>
tr>
table>
td>
tr>
table>
body>
html>
Explanation:
Check out our hands-on, practical guide to learning Git, with best-practices, industry-accepted standards, and included cheat sheet. Stop Googling Git commands and actually learn it!
- .mailcontainer: This is a class that you can use to style your email content’s main section. It’s given a set width, margin, border, and color.
- .header, .footer, .body: These are classes used to style your email’s header, footer, and body, respectively.
- .cta: This class allows you to style your buttons, such as CTA buttons, with a specified color, border design, padding, etc.
Bringing Everything Together With Jinja2
Having created our HTML template, it’s now time to bring everything together using the Jinja2 templating engine.
Import Project Modules
You’ve already set up your template directory – html_emailtemp. Now you can find and render templates using code. But before you do that, import the relevant project modules using the code below:
from jinja2 import Environment, PackageLoader, select_autoescape
env = Environment(loader=PackageLoader(’email_project’, ‘html_emailtemp’), autoescape=select_autoescape([‘html’, ‘xml’]))
Explanation:
-
Environment: Jinja2 utilizes a central object, the template Environment. Its instances store global objects and configurations, and load your email templates from a file.
-
PackageLoader: This configures Jinja2 to load email templates.
-
autoescape: To mitigate security threats such as cross-site scripting (XSS) attacks and protect your code, you can escape values (that are passed to the email template) while rendering HTML using the command autoescape. Or, you can validate user inputs to reject malicious code.
For security, autoescape is set to True to enable escaping values. If you turn it to False, Jinja2 won’t be able to escape values, and XSS attacks may occur. To enable autoescape, set autoescape to True:
env = Environment(loader=PackageLoader(“myapp”), autoescape=True)
Load Your Template
Once done, a template environment will be created with a template loader to find email templates created inside your project module’s template folder.
Next, load your HTML email template using the method – get_template(). This function will return your loaded template. It also offers several benefits such as enabling email template inheritance, so you can reuse the template in multiple scenarios.
template1 = env.get_template(“myemailtemplate.html”)
Render the Template
To render your email template, use the method – render()
html1 = template1.render()
As these HTML email templates are dynamic, you can pass keyworded arguments (kwargs) with Jinja2 to the render function. The kwargs will then be passed to your email template. Here’s how you can render your templates using the destined user’s name – “Jon Doe” – in your email.
html1 = template1.render(name=”Jon Doe”)
Let’s look at the complete code for this section:
from jinja2 import Environment, PackageLoader, select_autoescape
env = Environment(loader=PackageLoader(“email_project”, “html_emailtemp”),
autoescape=select_autoescape([“html”, “xml”]))
template1 = env.get_template(“myemailtemplate.html”)
html1 = template1.render()
Sending the Email
To send an email, you can use the application-level, straightforward protocol – Simple Mail Transfer Protocol (SMTP). This protocol streamlines the email sending process and determines how to format, send, and encrypt your emails between the source and destination mail servers.
In this instance, we’ll send emails in Python via SMTP since Python offers a built-in module for email sending. To send emails, Python provides a library, ‘smtplib’, to facilitate effortless interaction with the SMTP protocol.
To get started:
Install ‘smtplib’: Ensure you have installed Python on your system. Now, import ‘smtplib’ to set up connectivity with the mail server.
import smtplib
Define your HTML parameter: Define your HTML parameter for the mail object where you’ll keep your HTML template. It will instruct email clients to render the template.
Here’s the full code for this section:
import smtplib
from email.mime.text import MIMEText
from jinja2 import Template
sender = “[email protected]’ target=’_blank’ rel=’noopener noreferrer’>[email protected]”
recipient = “[email protected]’ target=’_blank’ rel=’noopener noreferrer’>[email protected]”
subject = “Your order is confirmed!”
with open(‘myemailtemplate.html’, ‘r’) as f:
template1 = Template(f.read())
html_emailtemp = “””
HTML Email Template
The estimated delivery date is 22nd August 2024.
Styled paragraph.
Thank you for being our valuable customer!
For additional help, contact us at [email protected]
“””
template1 = Template(html_emailtemp)
html1 = template1.render(name=”Jon Doe”)
message = MIMEText(html1, ‘html’)
message[‘Subject’] = subject
message[‘From’] = sender
message[‘To’] = recipient
with smtplib.SMTP_SSL(‘smtp.gmail.com’, 465) as server:
server.login(username, password)
server.sendmail(sender, recipient, message.as_string())
Explanation:
- sender: The sender’s email address
- recipient: The recipient’s email address
- from email.mime.text import MIMEText: This is used to import the class MIMEText, enabling you to attach your HTML template in the email.
- smtplib.SMTP_SSL(‘smtp.gmail.com’, 465) as server:: This establishes a connection with your email provider’s (Gmail’s) SMTP server using port 465. If you are using another SMTP provider, use their domain name, such as smtp.domain.com, with an appropriate port number. The connection is secured with SSL.
- server.login(username, password): This function allows you to log in to the email server using your username and password.
- server.sendemail(sender, recipient, message.as_string()): This command sends the HTML email.
Testing
Before sending your HTML email, test it to understand how different email clients render CSS and HTML. Testing tools like Email on Acid, Litmus, etc. can assist you.
Conclusion
To build custom email templates with HTML and CSS in Python, follow the above instructions. First, begin structuring your HTML email template, style emails with CSS, and then send them to your recipients. Always check your email template’s compatibility with different email clients and ensure to keep your HTML simple using tables. Adding an email link in HTML will also allow you to compose an email automatically in your email client and send it to a specific email address.
Last Updated: August 21st, 2024
Was this article helpful?
Get tutorials, guides, and dev jobs in your inbox.
Ivan DjuricAuthor
I’m a Technical Content Writer with 5 years of background covering email-related topics in tight collaboration with software engineers and email marketers. I just love to research and share actionable insights with you about email sending, testing, deliverability improvements, and more. Happy to be your guide in the world of emails!
