Styling Content: Free HTML Email Tutorial

This exercise is excerpted from Noble Desktop’s HTML Email training materials and is compatible with updates through 2021. To continue learning HTML Email with hands-on training, check out our coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this HTML Email tutorial:

Email-friendly CSS, Streamlining your workflow with embedded CSS, Closing the gap below images

Exercise Preview

jive finished styling content

Exercise Overview

Not all CSS will work consistently across all email clients. In this exercise, we will show you how to use CSS to style the content in our email, making sure that we use email-friendly rules and formatting.

  1. If you completed the previous exercise, events-issue21-summer.html should still be open, and you can skip the following sidebar. If you closed events-issue21-summer.html, re-open it now. We recommend you finish the previous exercise (1C) before starting this one. If you haven’t finished it, do the following sidebar.

    If You Did Not Do the Previous Exercise (1C)

    1. Close any files you may have open.
    2. On the Desktop, go to Class Files > yourname-HTML Email Class.
    3. Delete the Jive Factory folder if it exists.
    4. Duplicate the Jive Factory Ready for Styling folder.
    5. Rename the folder to Jive Factory.

  2. We’ll start by adding a background color to the event content. Find the event table row around line 27 and add the following property (in bold):

    <!-- start event listing -->
<table width="644" cellpadding="0" cellspacing="0" border="1">
   <tr bgcolor="#4d4d4d">
      <td align="right" valign="top" width="130">

    NOTE: Background color could also be applied with CSS, but for HTML emails, we almost always opt for the HTML version for consistency across email clients.

Working with Embedded CSS Styles

To style the heading and paragraph text we’ll use CSS, but instead of writing inline styles as we did in an earlier exercise, we will write embedded styles for the page in the head of the document.

Styles must be inlined in order for the newsletter to render correctly in Gmail, but there are many free online tools for converting embedded styles to inline styles, which will make our workflow easier. We’ll write embedded styles now and inline them later as part of our preflight process before we run tests.

  1. Add a style tag inside the head of the document like so:

    <head>
   <meta charset="UTF-8">
   <title>Summer Events at The Jive Factory</title>
   <style>

   </style>
</head>

  2. Inside the style tag, style all the headings in the newsletter by adding the following new CSS rule shown in bold:

    <style>
   h1 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: #ffffff;
   }
</style>

    NOTE: Remember that we recommend sticking with longhand hexadecimal values in the CSS for best results across the major email clients.

  3. While we’re here, let’s style all paragraphs as well. Add the following new rule (in bold) below the h1 rule:

    h1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   color: #ffffff;
}
p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 24px;
   color: #ffffff;
}

  4. Save the file and preview the page in a browser. It’s starting to look better but we need some padding around the text to make it more legible.

    Some email clients strip out cellpadding, so a safer way to add padding is with CSS. Let’s add a class to the event table so we can target its content with CSS.

  5. Return to your code editor and find the event table (around line 39).

  6. Add the following class to the table tag:

    <!-- start event listing -->
<table class="event" width="644" cellpadding="0" cellspacing="0" border="1">
   <tr bgcolor="#4d4d4d">

  7. Now that we have a class assigned to the table, we can write a rule to target all the table cells of these particular tables. Below the p rule, write the following new rule (around line 18):

    p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 24px;
   color: #ffffff;
}
.event td {
   padding: 20px 15px 10px;
}

    NOTE: This CSS shorthand says to put 20 pixels of padding on the top, 15 pixels on the left and right, and 10 pixels of padding on the bottom of the table cell.

  8. Let’s take a closer look at the code we just added. .event td is a selector that targets all td tags if they are inside of a table where the class is set to event.

    These types of selectors are called descendant (or nested) selectors because they target a child element if it sits inside a specific parent. Later on, we’ll use an online utility that will take this complex rule and inline this style everywhere it is necessary.

  9. Save the file and preview the page in a browser. The spacing has been vastly improved but the default margins on the paragraphs and headings are not exactly what we want.

  10. Return to your code editor and add the following new property declaration for the h1 rule, as shown in bold below:

    h1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   color: #ffffff;
   margin: 0 0 10px;
}

  11. Add the same new margin property for the paragraph rule as well:

    p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 24px;
   color: #ffffff;
   margin: 0 0 10px;
}

  12. Save the file and preview the page in a browser to see these subtle adjustments.

Adding Flair to the Headings

  1. The intro phrase of each event heading (such as Local Showcase:) is supposed to be gold. Return to your code editor so we can create a class style for this.

  2. Using a class selector, create a new rule below the p rule as follows:

    p {

    Code Omitted To Save Space 

       margin: 0 0 10px;
}
.intro {
   color: #fcb802;
}

  3. We want to add this class to the introductory phrase of all the headings. We only have one so far, but we plan to add more down the road. Around line 57, find the Local Showcase: The Autumn Spirit Experiment heading.

  4. Wrap the first part of the heading in a span tag with the class set to intro:

    <h1><span class="intro">Local Showcase:</span> The Autumn Spirit Experiment</h1>

  5. Let’s also make the ticket prices stand out more by making them bold. Create a new rule in the embedded styles:

    .intro {
   color: #fcb802;
}
.tickets {
   font-weight: bold;
}

  6. Find the paragraph around line 62 that says $5 adv / $7 day of show.

  7. Add the new tickets class to the paragraph as shown below:

    <p class="tickets">$5 adv / $7 day of show</p>

  8. Save the file and preview the page in a browser. Lovely, but notice the pesky gaps above and below the banner image, the Events This Week image, and the events table.

Closing the Gap

  1. Let’s get rid of the gaps. Return to your code editor.

    If you recall from an earlier exercise, we saw that images are displayed inline and, like text, are vertically aligned to the text baseline. This alignment creates extra, unfilled space below them. One easy fix for this issue is to tell the browser to render images as block elements rather than inline elements to avoid this vertical alignment issue altogether.

  2. Add the following new rule (in bold) below the p rule.

    p {

    Code Omitted To Save Space 

       margin: 0 0 10px;
}
img {
   display: block;
}

  3. Save the file and preview it in a browser to see how well this removes the gaps around the Events This Week image.

Styling the Date in the Left Column

  1. Return to your code editor.

  2. The date of the show in the left column is so important, it should be larger. Around line 58, wrap the date in a span tag with a class of date, as follows:

    <p>
   Friday<br>
   <span class="date">July 13</span><br>
   8:30&ndash;11:00pm
</p>

  3. Add the following new rule (in bold) below the .intro rule:

    .intro {
   color: #fcb802;
}
.date {
   font-size: 18px;
   font-weight: bold;
}

  4. Save the file and preview the page in a browser to see that the date now really pops.

Adding a Band Photo

  1. Return to your code editor.

  2. Let’s add a photo of the band to the event table. We’ll put it above the paragraph that describes the band. Around line 68, add the following bold code above the p tag:

    <h1><span class="intro">Local Showcase: </span>The Autumn Spirit Experiment</h1>
<img src="images/autumn-experiment.jpg" height="284" width="480">
<p>The Autumn Spirit Experiment is the avant-gaze-ers' attempt at soaring, shimmering, indie pocket rock. The result? Blistering,

  3. Save your file and preview the page in a browser. Nice, but it could use some margin on the bottom.

  4. Return to your code editor.

  5. Below the .event td rule, add the following new rule:

    .event td {
   padding: 20px 15px 10px;
}
.event img {
   margin-bottom: 10px;
}

  6. Save the file and preview the page in a browser. Better spacing!

Removing the Table Borders

Now that we’ve finished the layout, we can remove all of the ugly borders we’ve been using to see our nested table structure.

  1. Return to your code editor and open the Find and Replace feature (your menu options may be named differently depending on your code editor):

    • In Visual Studio Code: choose Edit > Replace.
    • For other code editors: try Cmd–F (Mac) or Ctrl–F (Windows).

  2. Enter the following (the Find and Replace labels may be named differently in your code editor):

    Find: border="1"
    Replace: border="0"

  3. Proceed to Replace All, and a total of 4 replacements should be made.

  4. Save the file and reload the browser. Much nicer!

Setting the Page Background Color

  1. We’re ready to change the background color of the large parent table back to black. Return to your code editor.

  2. Find the parent table’s td tag (around line 44). There should be a helpful comment tag waiting for you:

    <td align="center"> <!-- add bgcolor="#000000" here -->

  3. Edit the td tag to add the following attribute (in bold), as shown:

    <td align="center" bgcolor="#000000">
  4. You can also delete the comment, as it’s no longer necessary.

  5. Save the file and preview the page in a browser to see how the email will look to viewers. Snazzy!

Optional Bonus: Adding Another Event

If you have extra time, let’s add a second event to the newsletter.

  1. Return to your code editor.
  2. Select the event listing table, including the two comment tags (around lines 59–77).
  3. Copy the code.
  4. Paste a duplicate below the original table.
  5. Open content-events.html (Jive Factory > snippets).
  6. Cut the date and time paragraph for Saturday, July 14.
  7. Switch back to events-issue21-summer.html.
  8. In the second event table, replace the date and time paragraph with the new information you just copied.

  9. Do the same for the band description:

    • Go to content-events.html and cut the heading and paragraphs for Small Prune.
    • Switch back to events-issue21-summer.html
    • In the second event table’s right column (the second td tag), replace the band information with the new info you just copied.

  10. You’ll want to add a band image here, as well. Add the following bold code:

    <td align="left">
   <h1>Acoustic Night: Small Prune</h1>
   <img src="images/small-prune.jpg" height="284" width="480">
   <p>Small Prune sounds like Austin-flavored Link Wray on sleepytime tea, drawing influences from Tom Waits and Yoko Ono, with a knowing nod to (the criminally underrated) Stereolab.</p>
   <p>Free Admission</p>
</td>

  11. Add the following code to style the new date:

    <td align="right" valign="top" width="130">
   <p>
      Saturday<br>
      <span class="date">July 14</span><br>
      8:30&ndash;11:00pm
   </p>
</td>

  12. Finally, add the following code to style the heading intro and the ticket price:

    <td align="left">
   <h1><span class="intro">Acoustic Night:</span> Small Prune</h1>
   <img src="images/small-prune.jpg" height="284" width="480">
   <p>Small Prune sounds like Austin-flavored Link Wray on sleepytime tea, drawing influences from Tom Waits and Yoko Ono, with a knowing nod to (the criminally underrated) Stereolab.</p>
   <p class="tickets">Free Admission</p>
</td>
  13. Save the file.

  14. Return to the browser, and reload the page to see the new content.

    By making each event a separate table, it’s easier to add new events or delete old events. The new event looks good, but we could use some additional visual separation between the two different events.

  15. Return to your code editor.

  16. Edit the background color for the table row that holds the new event (around line 78), as follows:

    <tr bgcolor="#616161">
   <td align="left" valign="top" width="130">
      <p>
         Saturday<br>
         <span class="date">July 14</span><br>
         8:30&ndash;11:00pm
      </p>
   </td>

  17. Save the file and preview the page in a browser once more. Super!

How to Learn HTML Email

Master HTML email with hands-on training. Boost your email marketing campaigns by learning how to code emails that look good on different-sized devices.

Yelp Facebook LinkedIn YouTube Twitter Instagram