Why is not the style tag applying here

I am trying to style the html code but the css of style tag inside the const htmlContent is not applying to the html code below.Is there any other alternate way to do this which is easier .No styles are working

const htmlContent = `
<style>
table tr:hover {
background-color: #f5f5f5;
}
</style>
<header style="padding: 20px; text-align: center;position: relative">
<div class="contact-info" style="position: absolute; margin-top: 21px; margin-right: 25px; top: 0; right: 0; font-family: Arial, sans-serif; font-size: 13px; color: #fff; text-align: right;">
Contact: +91-8491064038, +91-9622259639<br>
Email: info@azeestravels.com
</div>
<div style ="padding: 20px;text-align: center;background-color: #333;">
<h1 style="display: inline-block;font-family: Arial, sans-serif; font-size: 48px; font-weight: bold; margin: 0; color: #333; text-shadow: 2px 2px #ccc; background-image: linear-gradient(to bottom, #ffcc00, #ff6600); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Azees Travel</h1>
<p id="tag" style="font-family: Arial, sans-serif; font-size: 16px; color: white; font-weight: bold;">Dream it, visit it</p></div>
<div>
<p id = "greet" style="font-family: Georgia, serif; font-size: 16px; line-height: 2.5; max-width: 1232px; padding: 30px; background-color: #fff; color: #333; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); margin: 0; margin-top: 10px;"><span id="gretD" style="font-size:29px">
Greetings from Azees Travel!</span><br>
Great to hear you are interested in visiting Kashmir.You can take a look at our scheduled upcoming tour for you. All of our Kashmir Tours include visits to Pahalgam, Gulmarg, 
Sonamarg and Srinagar.It also includes accommodation and transfers, when you arrive from airport and depart to Airport.We use quality accommodation throughout the tour and make 
use of new air-conditioned 4-wheelers. You are in good hands with our certified speaking guides all of whom work for us full time.We guarantee every tour and are committed to 
making sure you have a great experience. We wish you a very happy journey and we would love to make your trip more comfortable and enjoyable.Team AZEES TRAVEL wishes you a great 
journey & we would love to hear from you upon final package confirmation.
Thank you .....!</p>
</div>
<h3 style="text-align:left;color: red; text-decoration: underline;">Summary:</h3>
<table style="border-collapse: collapse; width: 100%; margin-bottom: 20px; background-color: #f8f8f8; font-size: 16px; color: #333;">
<tr>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;"><Tour Duration:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">5 Days</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Adults:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
</tr>
<tr>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Tour Start Date:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">April 1, 2023</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Kids:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
</tr>
</table>
<h3 style="text-align:left;color: red; text-decoration: underline;">The Travel Itinerary:</h3>
</header>
</form>`;

Two things:

1. You don't see the color change because td is in front tr and obscures the background
2. Inline style have higher specificity and will always override styles (so it's not recommended to use them)

Fix:

table tr:hover td {
background-color: #f5f5f5 !important;
}

Adding td fixes the obscuring problem

Adding !important fixes the inline style issue
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const htmlContent = `
<style>
table tr:hover td {
background-color: #f5f5f5 !important;
}
</style>
<header style="padding: 20px; text-align: center;position: relative">
<div class="contact-info" style="position: absolute; margin-top: 21px; margin-right: 25px; top: 0; right: 0; font-family: Arial, sans-serif; font-size: 13px; color: #fff; text-align: right;">
Contact: +91-8491064038, +91-9622259639<br>
Email: info@azeestravels.com
</div>
<div style ="padding: 20px;text-align: center;background-color: #333;">
<h1 style="display: inline-block;font-family: Arial, sans-serif; font-size: 48px; font-weight: bold; margin: 0; color: #333; text-shadow: 2px 2px #ccc; background-image: linear-gradient(to bottom, #ffcc00, #ff6600); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Azees Travel</h1>
<p id="tag" style="font-family: Arial, sans-serif; font-size: 16px; color: white; font-weight: bold;">Dream it, visit it</p></div>
<div>
<p id = "greet" style="font-family: Georgia, serif; font-size: 16px; line-height: 2.5; max-width: 1232px; padding: 30px; background-color: #fff; color: #333; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); margin: 0; margin-top: 10px;"><span id="gretD" style="font-size:29px">
Greetings from Azees Travel!</span><br>
Great to hear you are interested in visiting Kashmir.You can take a look at our scheduled upcoming tour for you. All of our Kashmir Tours include visits to Pahalgam, Gulmarg, 
Sonamarg and Srinagar.It also includes accommodation and transfers, when you arrive from airport and depart to Airport.We use quality accommodation throughout the tour and make 
use of new air-conditioned 4-wheelers. You are in good hands with our certified speaking guides all of whom work for us full time.We guarantee every tour and are committed to 
making sure you have a great experience. We wish you a very happy journey and we would love to make your trip more comfortable and enjoyable.Team AZEES TRAVEL wishes you a great 
journey & we would love to hear from you upon final package confirmation.
Thank you .....!</p>
</div>
<h3 style="text-align:left;color: red; text-decoration: underline;">Summary:</h3>
<table style="border-collapse: collapse; width: 100%; margin-bottom: 20px; background-color: #f8f8f8; font-size: 16px; color: #333;">
<tr>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;"><Tour Duration:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">5 Days</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Adults:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
</tr>
<tr>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Tour Start Date:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">April 1, 2023</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Kids:</td>
<td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
</tr>
</table>
<h3 style="text-align:left;color: red; text-decoration: underline;">The Travel Itinerary:</h3>
</header>
</form>`;
document.body.innerHTML = htmlContent

<!-- end snippet -->

as the comments implied, the td was missing. But also add the !important to the css, otherwise it won't overwrite your background-color used in the table

<style>
table tr:hover td {
background-color: #f5f5f5 !important;
}
</style>