Email Template using HTML and CSS - GeeksforGeeks

30 Aug, 2019
Have you ever wondered how one can send creative colorful email templates? In this article, we will create a basic email template using HTML and CSS. These email templates are generally designed for marketing purpose and are circulated through email campaigns.The main purpose of sending an email template is to attain the number of Call to Action(CTA). The creative design of an email template engages a client and can get more CTA on the required destination page.
Creating a sample TemplateSending the emails according to the desired outline can be very challenging. This is because different browsers possess different configurations and hence different parent CSS properties. 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: To start
<!-- 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:
<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:
<!-- 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:
<!-- 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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to Upload Image into Database and Display it using PHP ?
Form validation using jQuery
How to set fixed width for <td> in a table ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)