AWS SES: How to use CSS properly

December 19, 2022

I’m new to HTML and CSS. I want to send email (with send_templated_email function) using AWS SES. Here is a very simplified html example (I uploaded the css file to the Google Drive):

<!DOCTYPE html>
<html>

<head>
    <title>HTML Pandas Dataframe with CSS</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="https://drive.google.com/uc?export=view&id=1WXiOVD4Dse4sAyyhYmtGYFXXu5p7U1GO" />
    <title></title>
</head>


<body>
    <table>

        <tr style="color: rgb(119,119,119);font-size: 16.0px;">
            <td align="left">
                <p> </p>
                <p>Hi,</p>
                <p>Welcome!</p>

                <br>
                <table border="1" class="dataframe mystyle">
                    <thead>
                        <tr style="text-align: right;">
                            <th>id</th>
                            <th>name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Jack</td>
                        </tr>
                    </tbody>
                </table>
                <br>
    </table>
</body>

</html>

when i send email via AWS SES, i want it to look like this:

but it looks like this:

>Solution :

You can try this:

<!DOCTYPE html>
<html>

<head>
  <title>HTML Pandas Dataframe with CSS</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style>
.mystyle {
  font-size: 11pt;
  font-family: Arial;
  border-collapse: collapse;
  border: 2px solid silver;
}

.mystyle td {
  padding: 5px;
}

.mystyle th {
  padding: 5px;
  background: #66bfbf;
}
  </style>
</head>

<body>

  <table>
<tr style="color: rgb(119,119,119);font-size: 16.0px;">
  <td align="left">
    <p> </p>
    <p>Hi,</p>
    <p>Welcome!</p>
    <br>
    <br>
  </td>
</tr>
  </table>
  <table border="1" class="dataframe mystyle">
<thead>
  <tr class="mystyle" style="text-align: right;">
    <th>id</th>
    <th>name</th>
  </tr>
</thead>
<tbody>
  <tr class="mystyle">
    <td>1</td>
    <td>Jack</td>
  </tr>
</tbody>
  </table>
</body>

</html>