Chapter 2: Styling Basics for HTML Emails

Understanding Inline CSS and Basic Styling

CSS (Cascading Style Sheets) is used to style HTML elements, allowing you to control the appearance of your emails. However, not all email clients support external stylesheets or embedded styles. Thus, inline CSS is the most reliable method for styling HTML emails.

Why Use Inline CSS?

Inline CSS involves adding the style attribute directly to HTML elements. This ensures that styles are applied consistently across different email clients. For example:

<p style="color: #333333; font-size: 16px;">This is a styled paragraph.</p>

Basic Styling Techniques

Common styling properties for HTML emails include:

• color: Sets the text color. Example: color: #000000;
• font-size: Adjusts the text size. Example: font-size: 14px;
• font-family: Specifies the font type. Example: font-family: Arial, sans-serif;
• background-color: Sets an element's background color. Example: background-color: #f0f0f0;
• padding and margin: Controls spacing inside and outside elements. Example: padding: 10px;

Example of an Inline Styled Button

<a href="https://example.com" style="display: inline-block; padding: 10px 20px; background-color: #007BFF; color: #ffffff; text-decoration: none;">
    Click Me
</a>

This code creates a button with a blue background and white text, styled entirely with inline CSS.