diff --git a/analytics/templates/insight_info_message_prediction.mustache b/analytics/templates/insight_info_message_prediction.mustache
index d6b2f09b877..6e66e8a23dd 100644
--- a/analytics/templates/insight_info_message_prediction.mustache
+++ b/analytics/templates/insight_info_message_prediction.mustache
@@ -38,9 +38,7 @@
 {{> core_analytics/notification_styles}}
 
 {{#body}}
-    <div>
-        {{{.}}}
-    </div>
+    {{{.}}}
 {{/body}}
 <br/>
 
diff --git a/analytics/templates/notification_styles.mustache b/analytics/templates/notification_styles.mustache
index a942177b3de..527db085021 100644
--- a/analytics/templates/notification_styles.mustache
+++ b/analytics/templates/notification_styles.mustache
@@ -32,11 +32,16 @@
     }
 }}
 
-<style>
+{{! The styles defined here will be included in the Moodle web UI and in emails. Emails do not include Moodle
+stylesheets so we want these styles to be applied to emails. However, they will also be included in the Moodle web UI.
+We use the not(.dir-ltr):not(.dir-rtl) so that this style is not applied to the Moodle UI.
+Note that gmail strips out HTML styles which selector includes the caracters (), so the font-family rule
+is not applied in gmail.}}
+<head><style>
 body:not(.dir-ltr):not(.dir-rtl) {
     font-family: 'Open Sans', sans-serif;
 }
-body:not(.dir-ltr):not(.dir-rtl) .btn-insight {
+.btn-insight {
     color: #007bff;
     background-color: transparent;
     display: inline-block;
@@ -47,10 +52,9 @@ body:not(.dir-ltr):not(.dir-rtl) .btn-insight {
     user-select: none;
     border: 1px solid #007bff;
     padding: .375rem .75rem;
-    font-size: .9375rem;
     line-height: 1.5;
     border-radius: 0;
     text-decoration: none;
     cursor: pointer;
 }
-</style>
+</style></head>
diff --git a/user/templates/upcoming_activities_due_insight_body.mustache b/user/templates/upcoming_activities_due_insight_body.mustache
index eb4fd02100d..5dfe3f4cfea 100644
--- a/user/templates/upcoming_activities_due_insight_body.mustache
+++ b/user/templates/upcoming_activities_due_insight_body.mustache
@@ -37,56 +37,61 @@
     }
 }}
 
-<style>
-body:not(.dir-ltr):not(.dir-rtl) table.upcoming-activity-due {
-    font-family: 'Open Sans', sans-serif;
+{{! The styles defined here will be included in the Moodle web UI and in emails. Emails do not include Moodle
+stylesheets so we want these styles to be applied to emails. However, they will also be included in the Moodle web UI.
+The styles defined in the class .table have precedence over general styles at tag level, so these styles are only
+applied to emails.}}
+<head><style>
+table {
     text-align: justify;
     margin-bottom: 1rem;
     margin-top: 1rem;
 }
-body:not(.dir-ltr):not(.dir-rtl) table.upcoming-activity-due tr.when {
+table tr.when {
     background-color: #e9ecef;
 }
-body:not(.dir-ltr):not(.dir-rtl) table.upcoming-activity-due th {
+table th {
     padding: 1rem .75rem 1rem .75rem;
     font-weight: 400;
     font-size: larger;
     border-top: 1px solid #dee2e6;
 }
-body:not(.dir-ltr):not(.dir-rtl) table.upcoming-activity-due td {
+table td {
     padding: .75rem;
 }
-body:not(.dir-ltr):not(.dir-rtl) table.upcoming-activity-due td.link {
+table td.link {
     border-top: 1px solid #dee2e6;
     border-bottom: 1px solid #dee2e6;
 }
-</style>
+</style></head>
 
-{{#str}} youhaveupcomingactivitiesdueinfo, moodle, {{userfirstname}} {{/str}}
-<br/><br/>
+<div>
+    {{#str}} youhaveupcomingactivitiesdueinfo, moodle, {{userfirstname}} {{/str}}
+    <br/><br/>
 
-{{#activitiesdue}}
-    <table class="table upcoming-activity-due">
-        <thead>
-            <tr>
-                <th scope="col" class="h5">
-                    {{#icon}}
-                        {{#pix}} {{key}}, {{component}}, {{title}} {{alttext}} {{/pix}}
-                    {{/icon}}
-                    {{name}}
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr class="when">
-                <td><strong>{{#str}} whendate, calendar, {{formattedtime}} {{/str}}</strong></td>
-            </tr>
-            <tr>
-                <td>{{#str}} coursetitle, moodle, {"course": "{{coursename}}" } {{/str}}</td>
-            </tr>
-            <tr>
-                <td class="link"><a href="{{url}}">{{#str}} gotoactivity, calendar{{/str}}</a></td>
-            </tr>
-        </tbody>
-    </table>
-{{/activitiesdue}}
\ No newline at end of file
+    {{#activitiesdue}}
+        <table class="table upcoming-activity-due">
+            <thead>
+                <tr>
+                    <th scope="col" class="h5">
+                        {{#icon}}
+                            {{#pix}} {{key}}, {{component}}, {{title}} {{alttext}} {{/pix}}
+                        {{/icon}}
+                        {{name}}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="when">
+                    <td><strong>{{#str}} whendate, calendar, {{formattedtime}} {{/str}}</strong></td>
+                </tr>
+                <tr>
+                    <td>{{#str}} coursetitle, moodle, {"course": "{{coursename}}" } {{/str}}</td>
+                </tr>
+                <tr>
+                    <td class="link"><a href="{{url}}">{{#str}} gotoactivity, calendar{{/str}}</a></td>
+                </tr>
+            </tbody>
+        </table>
+    {{/activitiesdue}}
+</div>
