why does CSS work differently if it’s in its own file

So I have this example file that I copied from textfixer.com.

If I put all the CSS and html into a single file, it works as expected.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style style="text/css">
      .hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; border:#4e95f4 1px solid;
    }
    /* Define the default color for all the table rows */
    .hoverTable tr{
        background: #b8d1f3;
    }
    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }
</style>
</head>
<table class="hoverTable">
    <tr>
        <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    <tr>
        <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
    </tr>
</table>
<body>

</body>
</html>

Here is the output:
Continue reading why does CSS work differently if it’s in its own file