This post is written with courtesy of Melvin Rivera of All Forces. Visit the original post here.

The default interface for Mail signatures allows you to do rich text signatures using the fonts and colors palette. You can even drag an image into the compose signature window and it will be included in every email as an attachment. This is fine for most people, but attachments should be just that, an attachment of a file I am sending, not an image in my signature. So here’s an easy guide on how to do CSS signatures referencing images on an outside server and not as an attachment.

This tutorial covers Apple Mail in Mac OS X Tiger v.10.4

STEP 1: Create a New Mail Signature

Launch Mail, located in the Applications folder. From Mail’s top menu, select ‘ Mail > Preferences ‘ and go to the Signatures pane. From the Signatures pane, click the plus icon underneath the middle column to create a new Signature. In this example I cleared all my previous signatures for the purpose of clarity but this is not required. Once your signature is created, quit Mail by selecting ‘ Mail > Quit Mail ‘ from the top menu.

Step 2: Create Your New Signature in a Text Editor

Using a text editor application, create your signature using html and css. TextEdit can be used for this, just make sure you save as HTML and not rich text.

A quick note, Gmail will not display any of the CSS unless it’s inline. So this sample file has all the CSS inline including the image as an img file instead of a background css attribute. When using this method, GMail will show a link giving the user the option of showing the embedded images. If you are starting one from scratch check out A List Apart’s article on CSS in emails. In summary, do not use html, head or body tags, use divs instead. Use embedded CSS not external. Do not use classes that start with a dot, but you can do #div .class instead. The same goes to the a: tag.

Copy the code:

<!-- Div Class -->
<div id="sig" style=" line-height: 15px; margin: 6px 0 6px; padding: 5px 5px 10px; border-top: 1px #999999 dotted; border-bottom: 1px #999999 dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #339999;">

<!-- Photo or Graphic -->
<img src="http://www.josefsamuel.com/images/main/Josef-Samuel-Signature.jpg" alt="Josef Samuel" style="float: left; padding: 0px 10px 5px 0;" />
<!-- Photo or Graphic End -->

<!-- Main Content, text, and links -->
<strong style="color: #339999;">Josef Samuel</strong> | <a href="http://www.josefsamuel.com" title="Visit my website!" style="color: #339999; text-decoration: none; border-bottom: 1px #999999 dotted;">www.josefsamuel.com</a> | 574.596.7017<br />
Be my friend on <a href="http://www.facebook.com/josef.samuel" title="Be my friend on Facebook" style="color: #339999; text-decoration: none; border-bottom: 1px #999999 dotted;">Facebook</a>  | <a href="http://twitter.com/Josef_Samuel" title="Be my friend on Twitter" style="color: #339999; text-decoration: none; border-bottom: 1px #999999 dotted;">Twitter</a> | <a href="http://www.linkedin.com/in/josefsamuel" title="Be my friend on LinkedIn" style="color: #339999; text-decoration: none; border-bottom: 1px #999999 dotted;"> LinkedIn</a><br />
Get seasonal discount codes and more by subscribing to my newsletter <a href="http://josefsamuel.us1.list-manage.com/subscribe?u=dee230612cd480df34f8f7ee5&id=fa592830a2" title="Sign up for Joe's Newsletter" style="color: #339999; text-decoration: none; border-bottom: 1px #999999 dotted;">HERE</a>
<!-- Main Content, text, and links End -->

</div>
<!-- End Div Class -->

Step 3: Create Web Archive from Signature

Open the signature html file you just created in Safari. You can do this by dragging the actual file icon into the Safari icon in your dock. This should look exactly as you want your signature to look like.

To save this as a web archive, from Safari’s top menu select ‘ File > Save As… ‘ and save the signature as a Web Archive by selecting ‘Web Archive’ on the Format pulldown menu. Saving to the Desktop makes it easy to find for the next step.

Step 4: Replace Old Signature With New One

From the finder, navigate to ‘ your home folder > Library > Mail > Signatures ‘. Since I only have one signature in Mail, there’s only one ‘.webarchive’ file in this folder. If you have more than one signature, you need to find the one we created on step 1. Open the web archives in Safari to find the one we created in step one. Copy the file name of the archive file and paste the name in the new archive file on the desktop to rename it. Now drag the new signature archive from the desktop into the Signatures folder. It should prompt you asking if you want to replace the file, which you do.

Step 5: Activating the New Signature

Launch Mail and select ‘ Mail > Preferences ‘ from the top menu then go to the Signatures tab. You can rename the signature name here by double clicking it’s name and renaming it. Notice that Mail will not properly render the html in this Signature window but it will render it properly in the compose window.

Now drag the signature to the mail accounts you want it available for.

Then select the account from the left column and select the new signature from the ‘Choose Signature’ pulldown menu. This will make it the default signature for that account.

Step 6: Testing Our New CSS Signature

To test our new signature, compose a new email and send it to yourself or a friend. You should be able to see the signature in the compose window.

Click the send and receive button to receive you new email. Your new signature now contains no image attachments.

For extra reading, check out Jiradett's Guide to CSS Signatures for the iPhone.

Step 7: Final Thoughts

Disclaimer: Email clients can be configured to allow or not allow html in messages and so this may not work for everyone. Make sure you thoroughly test your new email signature for compatibility. Good luck, hope it helps you get inspired to create your own custom signature.