Why doesn't my email sent via Python use CSS correctly?

Question

I tried to send emails via smtplib. It correctly works with others' html/css code, but works incorrectly in my case. Here's my Python code:

smtp_server = smtplib.SMTP("smtp.gmail.com", 587)
smtp_server.starttls()
smtp_server.login(email, password)

message = EmailMessage()
message["From"] = email
message["To"] = recipient
message["Subject"] = "Test"
with open("test.html", "r") as file:
    text = file.read()

message.set_content(text, subtype="html")

smtp_server.send_message(message)
smtp_server.quit()

Here's my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style type="text/css">
.email-confirmation {
  background-color: #fff;
  display: flex;
  max-width: 480px;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  color: #000;
  margin: 0 auto;
  padding: 91px 69px 330px;
  font: 15px Inter, sans-serif;
}

.logo {
  aspect-ratio: 7.81;
  object-fit: contain;
  object-position: center;
  width: 179px;
  align-self: center;
  max-width: 100%;
}

.confirmation-title {
  font-size: 20px;
  font-weight: 600;
  align-self: start;
  margin-top: 51px;
}

.confirmation-message {
  font-weight: 300;
  margin-top: 24px;
}

.confirmation-code {
  text-align: center;
  border-radius: 30px;
  background-color: #000;
  align-self: center;
  margin-top: 55px;
  width: 215px;
  max-width: 100%;
  font-size: 35px;
  color: #fff;
  font-weight: 700;
  padding: 7px 35px;
}

.signature {
  font-weight: 500;
  align-self: start;
  margin-top: 40px;
}
</style>

<section class="email-confirmation">
  <img loading="lazy" src="url">
  <h1 class="confirmation-title">Подтверждение почты</h1>
  <p class="confirmation-message">
    Это письмо отправлено, чтобы <br />
    подтвердить электронную почту. <br />
    <br />
    Если это были не Вы, проигнорируйте данное письмо. <br />
    <br />
    Для завершения подтверждения - <br />
    вернитесь к боту и введите этот код.
  </p>
  <div class="confirmation-code" tabindex="0" role="textbox" aria-label="Confirmation code">173 586</div>
  <p class="signature">С уважением, команда Bard!</p>
</section>
</body>
</html>

If I open the file via a browser, the CSS loads correctly, but in Gmail, it doesn't.

Browser view

Gmail view

What can I do to resolve this?

For one thing, the <style> tag should be inside the <head> section, not the <body> section. — John Gordon
– John Gordon, Commented Sep 28, 2024 at 16:48

Marcin Orlowski · Accepted Answer · 2024-09-30 04:38:39Z

2

This is because you have a fundamental flaw in your understanding. Email clients like Gmail are not web browsers. They do not render code according to normal web standards. They are a law to themselves.

You need to check https://caniemail.com for what Gmail can use.

Also note that if it works on Gmail, it's not necessarily going to work on other email clients.

You might prefer to get snippets already tried and tested as there are lots out there.

edited Sep 30, 2024 at 4:38

Marcin Orlowski

75.7k11 gold badges128 silver badges152 bronze badges

answered Sep 30, 2024 at 0:26

Nathan

5,4792 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why doesn't my email sent via Python use CSS correctly?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related