Mail template css

Here is a basic template for a mail template using CSS:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mail Template</title>
  <style>
    /* Add your CSS styles here */
  </style>
</head>
<body>
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" bgcolor="#f2f2f2">
        <!-- Header section -->
        <table border="0" cellpadding="0" cellspacing="0" width="600">
          <tr>
            <td align="left" style="padding: 20px;">
              <h1 style="font-size: 24px; font-weight: bold; color: #333;">Your Company Name</h1>
            </td>
          </tr>
        </table>
        <!-- End of Header section -->
      </td>
    </tr>
    <tr>
      <td align="center" bgcolor="#f2f2f2">
        <!-- Content section -->
        <table border="0" cellpadding="0" cellspacing="0" width="600">
          <tr>
            <td align="left" style="padding: 20px;">
              <p style="font-size: 16px; color: #666;">This is the content of your email.</p>
            </td>
          </tr>
        </table>
        <!-- End of Content section -->
      </td>
    </tr>
    <tr>
      <td align="center" bgcolor="#f2f2f2">
        <!-- Footer section -->
        <table border="0" cellpadding="0" cellspacing="0" width="600">
          <tr>
            <td align="left" style="padding: 20px;">
              <p style="font-size: 14px; color: #999;">Copyright 2023 Your Company Name. All rights reserved.</p>
            </td>
          </tr>
        </table>
        <!-- End of Footer section -->
      </td>
    </tr>
  </table>
</body>
</html>

CSS

/* Add your CSS styles here */

/* Global styles */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #f2f2f2;
}

/* Header styles */
h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* Content styles */
p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

/* Footer styles */
p {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

/* Table styles */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

td {
  padding: 20px;
  border: 1px solid #ddd;
}

th {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(odd) {
  background-color: #fff;
}

This template uses a basic table structure with three sections: header, content, and footer. You can customize the styles as needed to fit your brand and design preferences.

Note: This is just a basic template, and you may need to add more styles or modify the existing ones to fit your specific use case. Additionally, you should test your email template in different email clients and devices to ensure it looks and functions as expected.

Mail Knowledge

Mail template css