Email Template using HTML and CSS

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 Template
Sending 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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Further sections can be made using <tr> and <td>tags. Now, let us enter further information.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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=
                           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>

chevron_right


Finally, you may add a footer containing social media links, company name, contact information, etc.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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=
                           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=
    width="30" /> 
    </a
      
    <a href="#"
    style="border:none;
    text-decoration: none; 
    padding: 5px;"> 
      
    <img height="30" 
    src=
width="30" /> 
    </a>
      
    <a href="#" 
    style="border:none;
    text-decoration: none;
    padding: 5px;"> 
      
    <img height="20"
    src=
        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>

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.