CSS Inlining Demo

Original HTML (with CSS in style tags)

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #ffffff;
    }
    .header {
      background-color: #3498db;
      color: white;
      padding: 20px;
      text-align: center;
    }
    .content {
      padding: 30px;
    }
    .button {
      display: inline-block;
      padding: 12px 24px;
      background-color: #27ae60;
      color: white;
      text-decoration: none;
      border-radius: 5px;
    }
    .footer {
      background-color: #34495e;
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 14px;
    }
    @media only screen and (max-width: 600px) {
      .container {
        width: 100% !important;
      }
      .content {
        padding: 20px !important;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Welcome to Our Newsletter</h1>
    </div>
    <div class="content">
      <h2>Hello {{first_name}},</h2>
      <p>Thank you for subscribing to our newsletter. We're excited to share our latest updates with you!</p>
      <p>Click the button below to visit our website:</p>
      <a href="https://example.com" class="button">Visit Website</a>
    </div>
    <div class="footer">
      <p>&copy; 2024 Your Company. All rights reserved.</p>
      <p>You received this email because you subscribed to our newsletter.</p>
    </div>
  </div>
</body>
</html>

Processed HTML (with inline CSS)

Strategy Descriptions

Standard

Preserves media queries and responsive design. Best for modern email clients like Gmail and Apple Mail.

Aggressive

Maximum compatibility. Removes all CSS classes and media queries. Best for legacy email clients.

Mobile Friendly

Optimized for mobile viewing. Keeps only essential media queries for responsive emails.

Outlook

Optimized for Microsoft Outlook. No media queries or animations, uses table-based layouts.

Gmail

Optimized for Gmail with support for most CSS features and media queries.