Styling emails with CSS is a critical aspect of email marketing and communication. Unlike web pages, emails are subject to the constraints and peculiarities of various email clients, each with its own level of CSS support. This makes email styling a unique challenge, requiring careful consideration of what CSS properties to use and how to structure the HTML.
The importance of writing styles for email with CSS cannot be overstated. Well-styled emails enhance readability, engagement, and overall user experience. They also help reinforce branding and make communications more professional. However, the challenges include inconsistent support for CSS across different email clients and the need to use inline styles for better compatibility. This article will explore the principles of writing styles for email with CSS, and provide practical examples. By the end of this article, you will have a comprehensive understanding of how to effectively style emails using CSS.
Basic Concepts of Email Styling
Email styling involves using HTML and CSS to format the content of an email. Unlike web pages, emails are typically styled using inline CSS to ensure compatibility across different email clients.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Email Structure</title>
</head>
<body style="margin:0; padding:0;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="padding:10px 0 30px 0;">
<table style="margin: 0 auto; border:1px solid #cccccc; border-collapse:collapse; width: 600px">
<tr>
<td style="text-align: center; background-color: #70bbd9; padding:40px 0 30px 0; color:#ffffff; font-size:28px; font-weight:bold; font-family:Arial, sans-serif;">
Welcome to Our Newsletter!
</td>
</tr>
<tr>
<td style="padding:40px 30px 40px 30px; background-color: #ffffff">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="color:#153643; font-family:Arial, sans-serif; font-size:24px;">
<b>Hello, John Doe!</b>
</td>
</tr>
<tr>
<td style="padding:20px 0 30px 0; color:#153643; font-family:Arial, sans-serif; font-size:16px; line-height:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis,
sit amet blandit ipsum volutpat sed.
</td>
</tr>
<tr>
<td>
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="width: 260px; vertical-align: top;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td>
<img src="https://via.placeholder.com/200" alt=""
width="100%" style="display:block;">
</td>
</tr>
<tr>
<td style="padding:25px 0 0 0; color:#153643; font-family:Arial, sans-serif; font-size:16px; line-height:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
</table>
</td>
<td style="font-size:0; line-height:0;" width="20">
</td>
<td style="width: 260px; vertical-align: top;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td>
<img src="https://via.placeholder.com/200" alt=""
width="100%" style="display:block;">
</td>
</tr>
<tr>
<td style="padding:25px 0 0 0; color:#153643; font-family:Arial, sans-serif; font-size:16px; line-height:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:30px 30px 30px 30px; background-color: #ee4c50">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="color:#ffffff; font-family:Arial, sans-serif; font-size:14px; width: 75%;">
® Someone, somewhere 2023<br/>
<a href="#" style="color:#ffffff;"><span style="color: #ffffff; ">Unsubscribe</span></a> to
this newsletter instantly
</td>
<td style="text-align: right; width: 25%;">
<table style="border: none; border-collapse: collapse">
<tr>
<td>
<a href="#">
<img src="https://via.placeholder.com/30" alt="Facebook" width="30"
height="30" style="display:block; border: none">
</a>
</td>
<td style="font-size:0; line-height:0; width: 20px;"> </td>
<td>
<a href="#">
<img src="https://via.placeholder.com/30" alt="Twitter" width="30"
height="30" style="display:block; border: none">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>In this example, a basic email structure is created using tables to ensure compatibility across various email clients. Inline styles are used to style the elements, such as the email body, header, and footer. This approach ensures that the styles are rendered correctly in different email clients, demonstrating the basic concept of email styling.
Inline CSS for Email Styling
Applying inline CSS involves embedding the CSS styles directly within the HTML elements. This is necessary for ensuring that styles are applied consistently across different email clients.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Styling Text and Images with Inline CSS</title>
</head>
<body style="margin:0; padding:0;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="padding:10px 0 30px 0;">
<table style="margin: 0 auto; border:1px solid #cccccc; border-collapse:collapse; width: 600px;">
<tr>
<td style="text-align: center; background-color: #70bbd9; padding:40px 0 30px 0; color:#ffffff; font-size:28px; font-weight:bold; font-family:Arial, sans-serif;">
Welcome to Our Newsletter!
</td>
</tr>
<tr>
<td style="padding:40px 30px 40px 30px; background-color: #ffffff">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="color:#153643; font-family:Arial, sans-serif; font-size:24px;">
<b>Hello, John Doe!</b>
</td>
</tr>
<tr>
<td style="padding:20px 0 30px 0; color:#153643; font-family:Arial, sans-serif; font-size:16px; line-height:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis,
sit amet blandit ipsum volutpat sed.
</td>
</tr>
<tr>
<td>
<img alt="" src="https://via.placeholder.com/200" style="display:block;" width="
100%">
</td>
</tr>
<tr>
<td style="padding:25px 0 0 0; color:#153643; font-family:Arial, sans-serif; font-size:16px; line-height:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:30px 30px 30px 30px; background-color: #ee4c50;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="color:#ffffff; font-family:Arial, sans-serif; font-size:14px; width: 75%;">
® Someone, somewhere 2023<br/>
<a href="#" style="color:#ffffff;"><span style="color: #ffffff; ">Unsubscribe</span></a> to
this newsletter instantly
</td>
<td style="text-align: right; width: 25%;">
<table style="border: none; border-collapse: collapse;">
<tr>
<td>
<a href="#">
<img alt="Facebook" height="30"
src="https://via.placeholder.com/30" style="display:block; border: none;" width="30">
</a>
</td>
<td style="font-size:0; line-height:0; width: 20px;"> </td>
<td>
<a href="#">
<img alt="Twitter" height="30"
src="https://via.placeholder.com/30" style="display:block; border: none;" width="30">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>In this example, inline CSS is applied to various elements to style the email. The text and images are styled using inline CSS properties, such as color, font-family, padding, and display. This ensures that the styles are applied consistently across different email clients, which may not support external or embedded stylesheets. This demonstrates how to effectively use inline CSS for email styling.
Responsive Email Design
Creating responsive email designs ensures that emails look good on different devices, including desktops, tablets, and mobile phones. This is achieved using media queries and flexible layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Responsive Email Layout</title>
<style>
@media only screen and (max-width: 600px) {
.content {
width: 100% !important;
padding: 0 10px !important;
}
.column {
width: 100% !important;
display: block !important;
}
}
</style>
</head>
<body style="margin:0; padding:0;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="padding:10px 0 30px 0;">
<table class="content" style=" margin: 0 auto; width: 600px; border:1px solid #cccccc; border-collapse:collapse;">
<tr>
<td style="text-align: center; background-color: #70bbd9; padding:40px 0 30px 0; color:#ffffff; font-size:28px; font-weight:bold; font-family:Arial, sans-serif;">
Welcome to Our Newsletter!
</td>
</tr>
<tr>
<td style="padding:40px 30px 40px 30px; background-color: #ffffff;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="color:#153643; font-family:Arial, sans-serif; font-size:24px;">
<b>Hello, John Doe!</b>
</td>
</tr>
<tr>
<td style="padding:20px 0 30px 0; color:#153643; font-family:Arial, sans-serif; font-size:16px; line-height:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis,
sit amet blandit ipsum volutpat sed.
</td>
</tr>
<tr>
<td>
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td class="column" style="vertical-align: top; width: 260px;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td>
<img alt="" src="https://via.placeholder.com/200"
style="display:block;" width="100%">
</td>
</tr>
<tr>
<td style="padding:25px 0 0 0; color:#153643; font-family:Arial, sans-serif; font-size:16px; line-height:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
</table>
</td>
<td style="font-size:0; line-height:0; width: 20px;">
</td>
<td class="column" style="vertical-align: top; width: 260px;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td>
<img alt="" src="https://via.placeholder.com/200"
style="display:block;" width="100%">
</td>
</tr>
<tr>
<td style="padding:25px 0 0 0; color:#153643; font-family:Arial, sans-serif; font-size:16px; line-height:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:30px 30px 30px 30px; background-color: #ee4c50;">
<table style="border: none; border-collapse: collapse; width: 100%;">
<tr>
<td style="color:#ffffff; font-family:Arial, sans-serif; font-size:14px; width: 75%;">
® Someone, somewhere 2023<br/>
<a href="#" style="color:#ffffff;"><span style="color: #ffffff; ">Unsubscribe</span></a> to
this newsletter instantly
</td>
<td style="text-align: center; width: 25%;">
<table style="border-collapse: collapse; border: none;">
<tr>
<td>
<a href="#">
<img alt="Facebook" height="30"
src="https://via.placeholder.com/30" style="display:block; border: none;" width="30">
</a>
</td>
<td style="font-size:0; line-height:0; width: 20px;"> </td>
<td>
<a href="#">
<img alt="Twitter" height="30"
src="https://via.placeholder.com/30" style="display:block; border: none;" width="30">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>In this example, media queries are used to create a responsive email design. The @media only screen and (max-width: 600px) rule ensures that the content adapts to smaller screen sizes by setting the width of the .content and .column classes to 100%. This approach ensures that the email layout adjusts for optimal viewing on different devices, demonstrating how to create responsive email designs.
Conclusion
Writing styles for email with CSS is essential for creating visually appealing and effective email communications. By understanding and utilizing the principles of email styling, you can enhance the readability and engagement of your emails.
Experiment with different styling techniques and ensure compatibility across various email clients to see how they can improve your email designs. For further learning, explore resources such as the MDN Web Docs on CSS for email. By continuing to practice and experiment, you will become proficient in writing styles for email with CSS.
