سؤال

I have a reasonably complicated question, however I know some of you guys are super-smart so I have no doubt there's a solution. I am building an HTML email campaign using Mailchimp and my own HTML. I have heard that to build a successful HTML email you need to 'design like it's 1997' and focus on using tables, and strictly NO outside style tags like so

<style>
    padding:0;
    margin:0;
</style>

There for all style must be within the HTML its self, like so;

<td style="
    padding:0;
    margin:0;"
</td>

So far so good, and my HTML email looks great! My only problem is dealing with link style, as the default is an ugly purple with a line underneath, without using external styles, I can't see a way to control there behaviour.

I have included my entire HTML code below to give you an idea of what I'm working with, hopefully I'll get some good feedback.

Thanks guys!

<table style="width:100%;">
<tr>
  <td style="
      width:100%;
      padding:32px 0 32px 0;
      height:116px; 
      background:#4b86fc;
      background-size:116px 116px;">
    </td>
  </tr>
<tr>
  <td style="
      padding:50px 40px 50px 40px;
      color:#000; font-family:Verdana, Geneva, sans-serif;
      font-weight:100; font-size:18pt;">
      Lorum Ipsum</td>
  </tr>
<tr>
  <td style="
      width:100%;
      padding:80px 0 80px 0;
      background-color:#ebebeb;
      background:#ebebeb;
      border-top:1px solid #c3c3c3;
      color:#545454; font-family:Verdana, Geneva, sans-serif;
      font-weight:100; font-size:18pt;
      text-align:center;
      text-decoration:none;">
        <ul style="list-style-type:none; margin:0; padding:0;">
        <li style="display:inline; padding:0 10px 0 0;"><a href="">Homepage</a></li>
        <li style="display:inline; padding:0 10px 0 0;"><a href="">Twitter</a></li>
        <li style="display:inline; padding:0 10px 0 0;"><a href="">Dribbble</a></li>
        <li style="display:inline; padding:0 0 0 10px;"><a href="">Facebook</a></li>
</ul>

</td>
</tr>
</table>
هل كانت مفيدة؟

المحلول

The same way as any other element.

<a href="" style="text-decoration: none; color: #222;">

نصائح أخرى

If you still require an underline but in a different colour use this:

<a href="link here" style="text-decoration: underline; color: #222;">link here</a>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top