I've been working on my home page, and everything was going smoothly. However, whenever I share it with someone else, the CSS doesn't seem to work properly. When I check the code on their laptop, it seems like it's being read as plain text rather than code. I've shared my entire code just in case there's an issue elsewhere. For context, I saved it as a .html document on Firefox. There are no errors when loaded, but the CSS just doesn't function. I'm new to HTML and CSS, so it might be something really simple.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style type="text/css">
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #327da8;
}
.name {
font-size: 20px;
font-color: black;
font-family: montserrat;
text-decoration: none;
position: absolute;
margin-top: 360px;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: lightgray;
padding: 27.5px;
border-radius: 0px 0px 15px 15px;
}
a img {
border-radius: 50%;
display: block;
border: none;
}
.navbar {
text-decoration: none;
padding-left: 30px;
padding-right: 30px;
font-family: montserrat;
font-weight: 150;
}
body {
background-image: url("file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/The%20Lost%20Dogs%20Home.png");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: 200px, 600px;
}
a:hover~.name {
color: #327da8;
border-color: #327da8;
}
img {
border: 10px solid black;
}
</style>
</head>
<body>
<nav>
<table style="margin-left:190px;margin-right:auto; margin-top:45px; font-size:20px;">
<tr>
<th><a class="navbar" href="PupLove.html">Home</a></th>
<th><a class="navbar" href="PupLoveDonate.html">Donate</a></th>
<th><a class="navbar" href="PupLoveCare.html">How to take care of a dog</a></th>
<th><a class="navbar" href="PupLoveContacts&FAQ's.html">Contacts and FAQ's</a></th>
<th><a class="navbar" href="PupLoveBlog.html">Blog</a></th>
</nav>
</tr>
</table>
<div>
<a href="PupLoveNala.html"><img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/goldenretrieversf1.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveNala.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a></div>
<div>
<a href="PupLoveBillie.html"><img style="position:absolute; margin-top:60px; margin-left:350px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/greatdanesf5.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:350px; padding:36.5px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBillie.html">Billie <br><br> Breed: Great <br> Dane <br><br> Sex: Male</a></div>
<div>
<a href="PupLoveBendi.html"><img style="position:absolute; margin-top:60px; margin-left:650px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-AB/australiancattledogsf1.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:650px; padding:41px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBendi.html">Bendi <br><br> Breed: Blue <br> Heeler <br><br> Sex: Male</a></div>
<div>
<a href="PupLoveRufus.html"><img style="position:absolute; margin-top:60px; margin-left:950px; border-radius:15px 15px 0px 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Bearded_collie_and_a_rope.jpg/640px-Bearded_collie_and_a_rope.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:950px; padding:21px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveRufus.html"><br>Rufus <br><br> Breed: Bearded <br> Collie <br><br> Sex: Male<br>ㅤ</a>
</div>
</body>
</html>