Email Template using HTML and CSS
Last Updated : 23 May, 2024
Ever been intrigued by the vibrant and engaging email templates that land in your inbox? This article will guide you through the process of creating a basic, yet visually appealing, email template using HTML and CSS. Such templates are primarily used in marketing campaigns with the ultimate goal of increasing the number of Call to Actions (CTAs). The creative design of an email template engages a client and can get more CTA on the required destination page.
Creating a sample Template
Crafting an email template that adheres to a specific outline can be a daunting task, primarily due to the varying configurations and parent CSS properties across different browsers.
For example, the “display: absolute” property does not work while sending an email through Gmail. Similarly, there are few other precautions to be taken when you code an email template. The first and most important step to start with email templates is, One must use HTML tables to build the basic structure of an email template. Creating a table ensures that the content sent is not distorted on forwarding or mailing using different email applications.
Example:
html <!-- Create main outline within which email will be enclosed --> <body style="background-color:grey"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="white" style="border:2px solid black"> <tbody> <tr> <td align="center"> <br /> <table align="center" border="0" cellpadding="0" cellspacing="0" class="col-550" width="550"> <tbody> <!-- content goes here --> </tbody> </table> </td> </tr> </tbody> </table> </body>
Now, remember, email applications will support inline style only. If you specify the properties in style tag, the email application will not consider them and the specified properties will not be applied.
Example:
html <body style="background-color:grey"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="white" style="border:2px solid black"> <tbody> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="col-550" width="550"> <tbody> <tr> <td align="center" style="background-color: #4cb96b; height: 50px;"> <a href="#" style="text-decoration: none;"> <p style="color:white;font-weight:bold;"> GeeksforGeeks </p> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body>
Further sections can be made using <tr> and <td>tags. Now, let us enter further information.
Example:
html <!-- Complete Email template --> <body style="background-color:grey"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="white" style="border:2px solid black"> <tbody> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="col-550" width="550"> <tbody> <tr> <td align="center" style="background-color: #4cb96b; height: 50px;"> <a href="#" style="text-decoration: none;"> <p style="color:white; font-weight:bold;"> GeeksforGeeks </p> </a> </td> </tr> </tbody> </table> </td> </tr> <tr style="height: 300px;"> <td align="center" style="border: none; border-bottom: 2px solid #4cb96b; padding-right: 20px;padding-left:20px"> <p style="font-weight: bolder;font-size: 42px; letter-spacing: 0.025em; color:black;"> Hello Geeks! <br> Check out our latest Blogs </p> </td> </tr> <tr style="display: inline-block;"> <td style="height: 150px; padding: 20px; border: none; border-bottom: 2px solid #361B0E; background-color: white;"> <h2 style="text-align: left; align-items: center;"> Design Patterns : A Must Skill to have for Software Developers in 2019 </h2> <p class="data" style="text-align: justify-all; align-items: center; font-size: 15px; padding-bottom: 12px;"> Design Patterns….??? I think you have heard this name before in programming… Yes, you might have heard this name before in programming if you are… </p> <p> <a href= "https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/" style="text-decoration: none; color:black; border: 2px solid #4cb96b; padding: 10px 30px; font-weight: bold;"> Read More </a> </p> </td> </tr> </tbody> </table> </body>
Finally, you may add a footer containing social media links, company name, contact information, etc.
Example:
HTML <!-- Complete Email template --> <body style="background-color:grey"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="550" bgcolor="white" style="border:2px solid black"> <tbody> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="col-550" width="550"> <tbody> <tr> <td align="center" style="background-color: #4cb96b; height: 50px;"> <a href="#" style="text-decoration: none;"> <p style="color:white; font-weight:bold;"> GeeksforGeeks </p> </a> </td> </tr> </tbody> </table> </td> </tr> <tr style="height: 300px;"> <td align="center" style="border: none; border-bottom: 2px solid #4cb96b; padding-right: 20px;padding-left:20px"> <p style="font-weight: bolder;font-size: 42px; letter-spacing: 0.025em; color:black;"> Hello Geeks! <br> Check out our latest Blogs </p> </td> </tr> <tr style="display: inline-block;"> <td style="height: 150px; padding: 20px; border: none; border-bottom: 2px solid #361B0E; background-color: white;"> <h2 style="text-align: left; align-items: center;"> Design Patterns : A Must Skill to have for Software Developers in 2019 </h2> <p class="data" style="text-align: justify-all; align-items: center; font-size: 15px; padding-bottom: 12px;"> Design Patterns….??? I think you have heard this name before in programming… Yes, you might have heard this name before in programming if you are… </p> <p> <a href= "https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/" style="text-decoration: none; color:black; border: 2px solid #4cb96b; padding: 10px 30px; font-weight: bold;"> Read More </a> </p> </td> </tr> <tr style="border: none; background-color: #4cb96b; height: 40px; color:white; padding-bottom: 20px; text-align: center;"> <td height="40px" align="center"> <p style="color:white; line-height: 1.5em;"> GeeksforGeeks </p> <a href="#" style="border:none; text-decoration: none; padding: 5px;"> <img height="30" src= "https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/icon-twitter_20190610074030.png" width="30" /> </a> <a href="#" style="border:none; text-decoration: none; padding: 5px;"> <img height="30" src= "https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/icon-linkedin_20190610074015.png" width="30" /> </a> <a href="#" style="border:none; text-decoration: none; padding: 5px;"> <img height="20" src= "https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/facebook-letter-logo_20190610100050.png" width="24" style="position: relative; padding-bottom: 5px;" /> </a> </td> </tr> <tr> <td style="font-family:'Open Sans', Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;" valign="top" align="center"> <a href="#" target="_blank" style="color:#999999; text-decoration:underline;">PRIVACY STATEMENT</a> | <a href="#" target="_blank" style="color:#999999; text-decoration:underline;">TERMS OF SERVICE</a> | <a href="#" target="_blank" style="color:#999999; text-decoration:underline;">RETURNS</a><br> © 2012 GeeksforGeeks. All Rights Reserved.<br> If you do not wish to receive any further emails from us, please <a href="#" target="_blank" style="text-decoration:none; color:#999999;">unsubscribe</a> </td> </tr> </tbody></table></td> </tr> <tr> <td class="em_hide" style="line-height:1px; min-width:700px; background-color:#ffffff;"> <img alt="" src="images/spacer.gif" style="max-height:1px; min-height:1px; display:block; width:700px; min-width:700px;" width="700" border="0" height="1"> </td> </tr> </tbody> </table> </body>
Output:
In this way, you can create many beautiful templates. While coding email with divs makes it a lot easier and faster, there are a lot of issues if you code using divs. Moreover, coding the structure using table and table rows is easy and fun.
A well-designed email template not only captivates the client’s attention but also significantly increases the likelihood of them taking the desired action on the target page.
Similar Reads
How to Create a Website Using HTML and CSS?
Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read
Design a Tribute Page using HTML and CSS
Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or cred
4 min read
Build a Survey Form using HTML and CSS
Creating a survey form is a great way to understand the basics of web development. In this tutorial, we will build a Survey Form that allows users to easily submit their responses. The form will include different input types such as text fields, checkboxes, and radio buttons, all designed using HTML
4 min read
Design a Parallax Webpage using HTML and CSS
A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. In this article, we are creating a parallax webpage using HTML and CSS. We will use basic tags of HTML like div, paragraph, and heading to writ
4 min read
Design an Event Webpage using HTML and CSS
Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What We’re Going to CreateWe’ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will include A header introducing the e
5 min read
Design a Webpage for online food delivery system using HTML and CSS
Creating your own online food delivery website is a great way to present a user-friendly platform for customers to browse and order food online. In this project, we’ll design a simple yet effective food delivery website using HTML and CSS. What We’re Going to Create...We’ll develop a straightforward
7 min read
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the s
6 min read
How to create a Landing page using HTML CSS and JavaScript ?
A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v
7 min read
Design a Webpage like Technical Documentation using HTML and CSS
In this article, we will design a webpage-like technical documentation using HTML and CSS . Technical documentation is any document that explains the features of the respective product. In this project, we are going to create technical documentation of C++ by using HTML and CSS. The webpage has a me
9 min read
Create a Music Website Template using HTML, CSS & JavaScript
A Music Website Template is a pre-designed layout for creating a music-themed webpage. By utilizing HTML, CSS, and JavaScript, developers can craft a functional and visually appealing website with features like play/pause controls, sections for home, music, about, and contact. Approach: We will crea
3 min read