Experiencing some difficulties with a seemingly simple task that I can't figure out. When I check my code in the browser, none of my styles are being applied to the HTML elements. The style sheet is located in the same folder as the main document, and I'm previewing everything on localhost using Chrome. I'm not sure why this isn't working properly, so any assistance would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="example meta description placeholder.">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyles.css">
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
</ul>
</nav>
</header>
</body>
</html>
The styles for my webpage are contained in a separate file named mystyles.css
<style>
.main {
color: blue;
}
</style>