How to create an email signature using HTML and CSS

Ever wanted to make a stylized email signature, but didn’t know how to do it? The video below goes through the steps of creating an email signature using HTML and CSS. I also discuss tips on how to make sure your images look sharp, and what programs to use to create your signature.

Use The Sample Code For Your Email Signature

Here is a look at the code for an example with a logo in the top row and all the text content in the bottom row. You can highlight the code below and copy and paste it into whatever HTML editing program that you want to use.

<table border="0" cellpadding="0">
    <tr>
        <td>
            <img src="https://michellethecreator.com/img/bogusbrand_400.jpg" width="100" style="margin-bottom:5px;" />
        </td>
    </tr>
    <tr>
        <td style="line-height:1.5em;">
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif; font-weight:bold;">MICHELLE SCHNEIDER,</span>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif; text-transform:uppercase;"> Awesome Human</span><br>
            <span style="font-size:14px; color:#f4397c; font-family:Arial, sans-serif; font-weight:bold;">O </span>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif;">555 111 1111 |</span>
            <span style="font-size:14px; color:#f4397c; font-family:Arial, sans-serif; font-weight:bold;">C </span>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif;">555 222 2222</span><br>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif; font-weight:bold; text-transform:uppercase;">1111 Nowhere Avenue | Wonder City, KS 12345</span><br>
            <a href="https://michellethecreator.com/" style="font-size:14px; color:#f4397c; font-family:Arial, sans-serif; font-weight:bold;">MichelleTheCreator.com</a>
        </td>
    </tr>
</table>

How it will look:

MICHELLE SCHNEIDER, Awesome Human
O 555 111 1111 | C 555 222 2222
1111 Nowhere Avenue | Wonder City, KS 12345
MichelleTheCreator.com

Example Signature With Logo On The Left

To use this example, highlight the code below and copy and paste it into the HTML editor of your choice.

<table border="0" cellpadding="0">
    <tr>
        <td style="vertical-align: top;">
          <img src="https://michellethecreator.com/img/bogusbrand_100.jpg" width="100" style="margin-right: 20px;" />
      	</td>
        <td style="line-height: 1.2em;">
          <span style="font-size: 13px; color: #333333; font-family: Arial, sans-serif; font-weight: bold;">MICHELLE SCHNEIDER</span><br>
          <span style="font-size: 13px; color: #333333; font-family: Arial, sans-serif;">Awesome Human</span><br>
          <span style="font-size: 13px; color: #f4397c; font-family: Arial, sans-serif; font-weight: bold;">O </span>
          <span style="font-size: 13px; color: #333333; font-family: Arial, sans-serif;">(555) 111-1111 |</span>
          <span style="font-size: 13px; color: #f4397c; font-family: Arial, sans-serif; font-weight: bold;">C </span>
          <span style="font-size: 13px; color: #333333; font-family: Arial, sans-serif;">(555) 222-2222</span><br>
          <span style="font-size: 13px; color: #333333; font-family: Arial, sans-serif;">1111 Nowhere Avenue | Wonder City, KS 12345</span><br>
          <a href="https://michellethecreator.com/" style="font-size: 13px; color: #f4397c; font-family: Arial, sans-serif; font-weight: bold; text-decoration: none;">MichelleTheCreator.com</a>
      	</td>
    </tr>
</table>

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

How it will look:

MICHELLE SCHNEIDER
Awesome Human
O (555) 111-1111 | C (555) 222-2222
1111 Nowhere Avenue | Wonder City, KS 12345
MichelleTheCreator.com

Example with Social Media Icons

This example features a logo on top with text information below and a few social media icons featured on the bottom row.

MICHELLE SCHNEIDER
555.111.2222 | MichelleTheCreator.com

SELECT AND COPY CODE TO USE FOR YOURSELF

<table border="0" cellpadding="0">
    <tr>
        <td>
            <img src="https://michellethecreator.com/img/bogusbrand_400.jpg" width="100" style="margin-bottom:5px;" />
        </td>
    </tr>
    <tr>
        <td style="line-height:1.5em;">
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif; font-weight:bold;">MICHELLE SCHNEIDER</span>
           <br>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif; font-weight:bold;">555.111.2222 | </span>
            <a href="https://michellethecreator.com/" style="font-size:14px; color:#f4397c; font-family:Arial, sans-serif; font-weight:bold;">MichelleTheCreator.com</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.instagram.com/"><img src="https://michellethecreator.com/img/instagram_black.png" width="20" style="margin-top:10px;" /></a>
            <a href="https://www.pinterest.com/"><img src="https://michellethecreator.com/img/pinterest_black.png" width="20" style="margin-top:10px;" /></a>
        </td>
    </tr>
</table>

Resources

Here are links to the programs and sites I mentioned in the video.

Sublime Text: https://www.sublimetext.com/
CodePen: https://codepen.io/
CodeKit: https://codekitapp.com/

Divi WordPress Theme