Adding & Styling Links

Topics covered in this HTML Email tutorial:

Coding links to open in a new tab or window, Styling links, The !important rule

Exercise Preview

Exercise Overview

In this exercise, we will add links to the Jive Factory website so email recipients can click through to get information about the venue and various events. We’ll also style the links using a technique that ensures cross email client support for our desired link styles.

1. We’ll be using a new folder of provided files for this exercise. It contains the same Jive Factory email you’ve been working on in previous exercises, except we’ve added more events.

   Close any files you may have open in your code editor to avoid confusion.

2. In your code editor, open events-issue21-summer.html from the Jive Factory Ready for Links folder. Be sure to go into the right folder!

Adding a Footer

1. Around line 143, find the <!-- end listing --> for the last event listing.

2. Below that comment, add a new table (for the footer) as shown below in bold:

      <!-- end listing -->
      <table>
         <tr>
            <td></td>
         </tr>
      </table>
   </td>
   

3. Let’s set the table width to be the same 644px width as the rest of the content and strip out the default padding and spacing. Add the following bold attributes to the table tag:

   <table width="644" cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td></td>
      </tr>
   </table>
   

4. We’ll want this content to be centered in the footer. Add the following attribute to the td tag and open up the tag to make room for content:

   <table width="644" cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td align="center">
   
         </td>
      </tr>
   </table>
   

5. Save the file.

6. To save you time, we’ve put the footer’s text into a file for you to copy/paste. From Jive Factory Ready for Links > snippets, open content-footer.html.

7. Copy all the text inside content-footer.html.

8. Close content-footer.html.

9. Switch back to events-issue21-summer.html.

10. Paste the footer text into the empty table cell you added a moment earlier, like so:

    <table width="644" cellpadding="0" cellspacing="0" border="0">
       <tr>
          <td align="center">
             All content &copy; The Jive Factory.  |   580 Lispenard St. New York, NY 10012   |   Open All Week 4pm&ndash;4am | Unsubscribe
          </td>
       </tr>
    </table>
    

    NOTE: A method to unsubscribe from commercial email is required by anti-spam laws. Typically your email marketing service (such as MailChimp, Campaign Monitor, Constant Contact, etc.) will automatically add a footer (below and outside the main content of the email) with an unsubscribe link and probably some other info. Consult your email marketing service for more info.

11. Now we need to style the content. First, add the following class to the td tag:

    <td align="center" class="footer">
       All content &copy; The Jive Factory.  |   580 Lispenard St. New York, NY 10012   |   Open All Week 4pm&ndash;4am | Unsubscribe
    </td>
    

12. Next, scroll up to the CSS toward the top of the document and, at the bottom of the styles (around line 39), add the following new rule:

    .footer {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 10px;
       font-weight: bold;
       color: #fcb802;
       padding: 20px;
    }
    

13. Save the file and preview the page in a browser. Scroll down to see the footer.

Adding Links to Images & Removing a Default Border

Almost all the content in the email, aside from the band biographies, will be links. We don’t want to miss a click opportunity!

1. Let’s start with the banner image. Locate the banner image (around line 55) and wrap it in the following link tag (in bold):

   <a href="http://thejivefactory.com">
      <img src="images/banner.jpg" height="224" width="644">
   </a>
   

   NOTE: All website and image links must be an absolute URL (not a relative path to another file in your website) to work properly in the finished email. For now it’s easier to work with local images, but we’ll update all the image links (in the next exercise) with a Find and Replace.

2. While we are here, let’s use the target attribute to make this link open in a new browser window or tab when emails are viewed in web-based email clients. Add the following attribute to the anchor tag:

   <a href="http://thejivefactory.com" target="_blank">
      <img src="images/banner.jpg" height="224" width="644">
   </a>
   

3. Save the file and preview the page in a browser.
4. Click the header image and a new tab should open with the Jive Factory website.

5. In your code editor, return to the CSS toward the top of the document and find the img rule (around line 20).

6. Some older email clients place an ugly blue border around all images that are linked. In the img rule, add the code shown below in bold:

   img {
      display: block;
      border: 0;
   }
   

7. Save the file.

Creating Links in Event Tables

Let’s create links for an event. There are multiple appropriate pieces of content that an email recipient may want to click: the time and date of each event, the main heading, the band image, and the ticket price.

h1 and p tags are block elements that stack on top of each other, as opposed to span and a tags which inline elements that go next to each other in a line.

Some email services (such as MailChimp) do not allow block elements (like the p tag) inside inline elements (like the a tag), therefore we must place links inside those elements rather than wrapping them around the outside. This forces us to have multiple links (inside each block element), rather than one link wrapping multiple block elements.

1. We’ll start by adding a link around the date and time content of the first event. Find the td tag around line 72 and wrap its content in an anchor tag, as follows:

   <td align="right" valign="top" width="130">
      <p>
         <a href="http://thejivefactory.com/autumn-experiment.html" target="_blank">
            Friday<br>
            <span class="date">July 13</span><br>
            8:30&ndash;11:00pm
         </a>
      </p>
   </td>
   

2. Wrap the heading with the same link. Starting around line 82, modify the the first event, like so:

   <td align="left">
      <h1>
         <a href="http://thejivefactory.com/autumn-experiment.html" target="_blank">
            <span class="intro">Local Showcase:</span> The Autumn Spirit Experiment
         </a>
      </h1>
   

3. Around line 87, wrap the band image with the appropriate link, like so:

   </h1>
   <a href="http://thejivefactory.com/autumn-experiment.html" target="_blank">
      <img src="images/autumn-experiment.jpg" height="284" width="480">
   </a>
   <p>The Autumn Spirit Experiment is the avant-gaze-ers' attempt at soaring, shimmering, indie pocket rock.
   

4. Around line 91, wrap the $5 adv / $7 day of show paragraph’s text in a link, as follows:

       <p class="tickets">
         <a href="http://thejivefactory.com/autumn-experiment.html" target="_blank">
            $5 adv / $7 day of show
         </a>
      </p>
   </td>
   

5. Save the file and preview the first event in the newsletter in a browser. Notice that all the linked text is now colored (instead of the white it’s supposed to be) and underlined. This is the default text style for links in all major browsers and most email clients.

   We’ll fix the styling in a moment, but for now test the links to make sure they work.

   NOTE: We’d need to add links to the other events, but that’s busy work we won’t make you do.

Styling the Links

1. Let’s change the linked text to white so it’s easier to read. Back in your code editor, scroll up to the CSS toward the top of the document.

2. Add the following new rule below the img rule:

   img {
      display: block;
      border: 0;
   }
   a {
      color: #ffffff;
      text-decoration: none;
   }
   

3. Save the file and preview the links in a browser.

4. Return to your code editor.

5. We recommend taking an extra precaution and flagging these with a special property that essentially says “do not override”. Add the following bold code:

   a {
      text-decoration: none !important;
      color: #ffffff !important;
   }
   

   The !important property must be placed at the end, immediately before the semicolon. This declaration provides a way for us to give a CSS value more weight than it naturally has and (in most cases) override third-party styles that email clients inject into our code.

6. Save the file.