Skip to main content
April 1, 2026Dan Rodney/11 min read

Styling Content: Free HTML Email Tutorial

Master Professional HTML Email Design and Styling

Tutorial Learning Objectives

Email-Friendly CSS

Learn CSS techniques that work consistently across all major email clients. Understand the limitations and best practices for email styling.

Embedded to Inline Workflow

Master the workflow of writing embedded CSS styles and converting them to inline styles for optimal email compatibility.

Visual Enhancement

Add professional styling including background colors, typography, spacing, and image optimization for email newsletters.

Topics Covered in This HTML Email Tutorial:

Master email-friendly CSS techniques, streamline your development workflow with embedded CSS styles, and eliminate the persistent gaps that appear below images in email clients.

Exercise Preview

jive finished styling content

Exercise Overview

Email client compatibility remains one of the most challenging aspects of HTML email development in 2026. Unlike web browsers that have largely standardized CSS support, email clients interpret styles with frustrating inconsistency. In this exercise, we'll demonstrate how to style email content using CSS rules that work reliably across major email platforms, ensuring your designs render consistently whether viewed in Gmail, Outlook, Apple Mail, or mobile clients.

  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 strongly recommend completing the previous exercise (1C) before proceeding, as this exercise builds directly on that foundation. If you haven't finished it, follow the steps in the sidebar below.

    Email Client Compatibility Challenge

    Not all CSS will work consistently across all email clients. This exercise focuses on using only email-friendly rules and formatting to ensure your newsletter renders correctly everywhere.

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

  1. Close any files you may have open.
  2. On the Desktop, navigate 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 duplicated folder to Jive Factory.

  • We'll begin by adding a background color to the event content area. Locate the event table row around line 27 and add the following bgcolor property (shown 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: While background colors can be applied using CSS, HTML email best practices in 2026 still favor HTML attributes like bgcolor for maximum consistency across email clients. This approach ensures your background colors display correctly even in clients with limited CSS support.

    • Quick Setup Process

    1

    Clean Your Workspace

    Close any open files and navigate to Class Files > yourname-HTML Email Class on your Desktop. Delete any existing Jive Factory folder.

    2

    Prepare Project Files

    Duplicate the 'Jive Factory Ready for Styling' folder and rename it to 'Jive Factory' to begin working with the template.

    3

    Add Background Styling

    Locate the event table row around line 27 and add bgcolor='#4d4d4d' property for initial styling foundation.

    Working with Embedded CSS Styles

    For styling heading and paragraph text, we'll use CSS embedded in the document head rather than inline styles. This approach significantly improves development workflow and code maintainability.

    While Gmail and some other email clients require inline styles for final delivery, numerous free online tools can automatically convert embedded styles to inline styles. This conversion process has become standard practice in professional email development workflows, allowing developers to write clean, organized code during development and optimize for delivery later.

    1. Add a style block inside the document head as follows:

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

   </style>
</head>

    2. Inside the style block, create a rule to style all newsletter headings by adding the following CSS (shown in bold):

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

      NOTE: Email development best practices recommend using full six-character hexadecimal color values rather than shorthand versions. This ensures consistent color rendering across all major email clients, particularly older versions of Outlook.

    3. Next, we'll style all paragraph elements. Add the following 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 it in your browser. The typography is improving, but the text needs breathing room to enhance readability.

      Many email clients inconsistently handle or completely strip the cellpadding attribute from tables. CSS padding provides a more reliable solution for creating consistent spacing around content.

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

    6. Add a class attribute to the table tag:

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

    7. With the class in place, we can now target all table cells within event tables. Add the following rule below the p 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 applies 20 pixels of padding to the top, 15 pixels to both left and right sides, and 10 pixels to the bottom of each table cell. Understanding shorthand properties helps keep your CSS concise and maintainable.

    8. Let's examine the selector we just created. .event td is a descendant selector that targets all td elements nested inside any element with the class event. Descendant selectors provide precise control over styling specific content areas without affecting other parts of your email.

      During the final preparation process, CSS inlining tools will automatically convert these complex selectors into inline styles applied directly to the relevant HTML elements.

    9. Save your file and preview it in a browser. The spacing has improved dramatically, but the default margins on headings and paragraphs need fine-tuning for optimal visual hierarchy.

    10. Return to your code editor and add a margin property to the h1 rule:

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

    11. Apply the same margin treatment to paragraph elements:

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

    12. Save the file and preview it in your browser to observe these subtle but important spacing refinements.

    Gmail Compatibility Strategy

    Styles must be inlined for Gmail compatibility, but embedded styles make development easier. Write embedded styles first, then use free online tools to convert them to inline styles during the preflight process.

    Embedded vs Inline CSS for Email

    Pros
    Easier to write and maintain during development
    Better organization and readability of code
    Can be converted to inline styles automatically
    Allows for more complex selectors during development
    Cons
    Must be converted to inline for Gmail compatibility
    Requires additional processing step before testing
    Not all email clients support embedded styles
    Adds complexity to the deployment workflow

    Adding Flair to the Headings

    Visual hierarchy plays a crucial role in email design effectiveness. By styling key elements differently, we guide the reader's eye and emphasize important information like event categories and pricing.

    1. Each event heading includes an introductory phrase (such as Local Showcase:) that should appear in gold to create visual distinction. Return to your code editor to create a class style for this element.

    2. Create a new class selector rule below the p rule:

      p {

      Code Omitted To Save Space

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

    3. We'll apply this class to the introductory phrase in all event headings. Currently we have one heading, but this scalable approach will work as we add more events. Around line 57, find the Local Showcase: The Autumn Spirit Experiment heading.

    4. Wrap the introductory portion in a span element with the intro class:

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

    5. Ticket pricing deserves visual emphasis since it directly impacts purchasing decisions. Create a new rule in your embedded styles:

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

    6. Locate the paragraph around line 62 containing $5 adv / $7-day of show.

    7. Apply the tickets class to this paragraph:

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

    8. Save your file and preview it in a browser. The visual hierarchy is much stronger now, but notice the problematic gaps appearing above and below the banner image, the Events This Week image, and around the events table. These gaps are a common issue in email design that we'll address next.

    Typography Enhancement Techniques

    Color Coding System

    Use the .intro class with #fcb802 gold color to highlight introductory phrases like 'Local Showcase:' for better visual hierarchy.

    Emphasis Styling

    Apply .tickets class with bold font-weight to make pricing information stand out and catch reader attention.

    Closing the Gap

    The mysterious gaps around images plague even experienced email developers. Understanding why they occur and how to eliminate them is essential for professional-quality email design.

    1. These gaps occur because images are displayed as inline elements by default, similar to text characters. Like text, images align to the baseline, leaving space below for descender characters (like the tail of a 'g' or 'y'). Converting images to block elements eliminates this baseline alignment issue entirely.

      Return to your code editor to implement this solution.

    2. Add the following rule below the p rule:

      p {

      Code Omitted To Save Space

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

    3. Save your file and preview it in a browser. The gaps around the Events This Week image should now be eliminated, creating a much cleaner, more professional appearance.

    Image Display Fix

    Images display inline by default and align to the text baseline, creating unwanted gaps. Set images to display: block to eliminate vertical alignment issues and remove spacing gaps.

    Styling the Date in the Left Column

    Event dates are critical information that drives attendance decisions. Making them visually prominent helps readers quickly scan and identify events of interest.

    1. Return to your code editor.

    2. Around line 58, wrap the numerical date in a span element with a date class:

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

    3. Create a styling rule for dates below the .intro rule:

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

    4. Save your file and preview it in a browser. The date now commands appropriate visual attention, making it easy for readers to quickly identify event timing.

    Font Size Hierarchy

    Date Text
    18
    Heading Text
    18
    Body Text
    14

    Adding a Band Photo

    Visual content significantly increases email engagement rates. Adding band photos helps readers connect emotionally with events and makes the newsletter more visually appealing.

    1. Return to your code editor.

    2. We'll insert a band photo above the descriptive paragraph. Around line 68, add the following image 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 it in the browser. The image adds visual interest, but it needs proper spacing from the text below.

    4. Return to your code editor.

    5. Add a rule below the .event td rule to style images within event tables:

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

    6. Save your file and preview it in the browser. The improved spacing creates better visual separation between the image and text content.

    Image Integration Process

    1

    Insert Image Element

    Add the img tag with src='images/autumn-experiment.jpg' and specify width='480' height='284' for consistent display across email clients.

    2

    Apply Bottom Margin

    Use .event img selector to add margin-bottom: 10px for proper spacing between the image and following content.

    Removing the Table Borders

    Now that our layout structure is complete and properly styled, we can remove the temporary borders that helped us visualize the table architecture during development.

    1. Return to your code editor and access the Find and Replace functionality. The exact menu location varies by editor:

      • In Visual Studio Code: select Edit > Replace
      • In most other editors: use Cmd–F (Mac) or Ctrl–F (Windows)

    2. Configure the find and replace operation as follows:

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

    3. Execute Replace All. You should see confirmation that 4 replacements were made across your document.

    4. Save your file and reload the browser. The clean, border-free design now showcases your content without visual distractions.

    Development vs Production Styling

    Borders with border='1' help visualize table structure during development. Use Find and Replace to change all instances to border='0' for clean production appearance.

    Setting the Page Background Color

    The final step in our basic styling involves setting the overall page background to create a cohesive visual presentation.

    1. We'll change the parent table's background color to black, completing our dark theme design. Return to your code editor.

    2. Locate the parent table's td tag around line 44. Look for the helpful comment we placed earlier:

      <td align="center"> <!—add bgcolor="#00,000" here—>

    3. Add the bgcolor attribute to the td tag:

      <td align="center" bgcolor="#00,000">
    4. Remove the comment since it's no longer needed.

    5. Save your file and preview it in the browser. Your email now presents a polished, professional appearance that's ready for real-world deployment.

    HTML vs CSS Background Methods

    FeatureHTML AttributeCSS Property
    Email CompatibilityExcellentGood
    Syntaxbgcolor='#000000'background-color: #000000
    Recommended for EmailYesSometimes
    Recommended: Use HTML bgcolor attribute for maximum email client compatibility, especially for background colors.

    Optional Bonus: Adding Another Event

    If time permits, let's demonstrate the scalability of our design system by adding a second event. This exercise shows how well-structured HTML and CSS makes content expansion straightforward.

    1. Return to your code editor.
    2. Select the complete event listing table, including both comment tags (around lines 59–77).
    3. Copy this code block.
    4. Paste a duplicate directly below the original table.
    5. Open content-events.html in the Jive Factory > snippets folder.
    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 existing date and time paragraph with the new Saturday information.

    9. Replace the band content following the same process:

      • Return 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 (second td tag), replace the band information with the Small Prune content

    10. Add the corresponding band image with the following 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. Apply the date class to the new event's 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. Apply consistent styling to the heading and pricing:

      <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 your file.

    14. Preview the page in your browser to see the new content. The modular table structure makes adding and removing events effortless while maintaining consistent styling.

      To improve visual separation between events, we'll apply a slightly different background color to the second event.

    15. Return to your code editor.

    16. Modify the background color for the second event's table row (around line 78):

      <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 your file and preview it one final time. The alternating background colors create clear visual separation while maintaining design cohesion—a professional touch that enhances readability and user experience.

    Event Addition Checklist

    0/6

    Key Takeaways

    1Use HTML attributes like bgcolor instead of CSS for background colors to ensure maximum compatibility across email clients
    2Write embedded CSS styles during development, then convert to inline styles before testing for Gmail compatibility
    3Set images to display: block to eliminate unwanted gaps caused by inline baseline alignment
    4Use longhand hexadecimal color values in CSS for best results across major email clients
    5Apply descendant selectors like .event td to target specific table cells within classed containers
    6Implement a consistent class system for styling elements like .intro for gold text and .tickets for bold pricing
    7Use Find and Replace functionality to efficiently remove development borders before production
    8Separate events into individual tables to make adding or removing events easier in the future

    RELATED ARTICLES