Styling Signature Text

   I've just started a partnership with two very good friends, and I'm setting up the email signatures. The site is studioSky.co, and we're likely going to style the text like this:

studioSky

   But how do you do that in an HTML signature? I did a lot of Googling and finally figured it out. I'll give you the general answer first, then the specific answer for what I was trying to do.


General Solution

   If you're on a Mac, the simplest way I've found is to open TextEdit and paste your styled text into the window. Under Preferences>Open and Save, set Document Type to HTML 4.0.1 Strict and Styling to Inline CSS. This will write all the formatting right in the line where the styled text is, which makes it much simpler for someone like me (who isn't an HTML guru) to understand.

   When you Save, it'll give you a choice of formats. Choose Web Page (.html). Open the HTML file in your HTML editor (I use Komodo Edit because it's simple and free.) You won't need most of the HTML in the window. Just go to the lines that contain the styled text, copy that, and paste it into your signature's HTML file in Komodo Edit.


Specific Solution

   The HTML file contained the following:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta http-equiv="Content-Style-Type" content="text/css">

  <title></title>

  <meta name="Generator" content="Cocoa HTML Writer">

  <meta name="CocoaVersion" content="1187">

</head>

<body>

<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Times; color: #938d7a"><i>studio</i><span style="color: #50504d">Sky</span></p>

</body>

</html>


But that's way too much information. All I really need to worry about is the line that says:


<p style="margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Times; color: #938d7a"><i>studio</i><span style="color: #50504d">Sky</span></p>


I don't need to worry about margins or fonts because I'm not changing either, so I deleted those and got this:


<p style="color: #938d7a"><i>studio</i><span style="color: #50504d">Sky</span></p>


That's close, but I don't need the paragraph formatting, either, because I don't want the extra space around studioSky in the signature, so I replaced "p" with "span" and got the following:


<span style="color: #938d7a"><i>studio</i></span><span style="color: #50504d">Sky</span>


This is the text that I copied into my signature to get studioSky. Fairly simple in the end, but it took me awhile to figure out. Hopefully this saves you the time.



© 2012 The Guild Foundation Press