Gmail estyle

You're referring to the Gmail style!

Here's a simple way to style your emails like Gmail:

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Email Subject</title>
  <style>
    /* Add your CSS styles here */
  </style>
</head>
<body>
  <div class="email-container">
    <div class="email-header">
      <h2>Your Email Subject</h2>
    </div>
    <div class="email-body">
      <!-- Your email content goes here -->
      <p>This is your email content.</p>
    </div>
    <div class="email-footer">
      <p>Best regards,</p>
      <p>Your Name</p>
    </div>
  </div>
</body>
</html>

CSS Styles

.email-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.email-header {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.email-header h2 {
  font-size: 18px;
  margin: 0;
}

.email-body {
  padding: 20px;
}

.email-body p {
  font-size: 16px;
  margin-bottom: 20px;
}

.email-footer {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.email-footer p {
  font-size: 14px;
  margin-bottom: 10px;
}

Tips

Use a fixed width for your email container (e.g., 600px) to ensure it looks good on various devices.
Use a consistent font family and size throughout your email.
Use a clear and concise subject line and email content.
Make sure your email is responsive and looks good on different devices and browsers.

Remember to test your email in different email clients and devices to ensure it looks good and functions as expected.

Mail Knowledge

Gmail estyle