I am facing an issue with linking my CSS style sheet to my HTML file. I have double-checked the formatting and when I open the HTML file in Finder, it displays correctly. However, when I run my web application locally, the styling does not apply. I am using Sublime for editing.
Here is a snippet from my index.html file and styles.css:
index.html:
<html>
<head>
<title>Attack On Purdue Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="init_div">
<h1>ATTACK ON PURDUE</h1>
<div>
<p style="display: inline">Username: </p>
<input type="username">
</div>
<div>
<p style="display: inline">Password: </p>
<input type="password">
</div>
<button onclick="login()">Login</button>
</div>
...
styles.css:
#init_div {
width:800px;
height:600px;
background-color:red;
}
Edit: Upon further investigation, I suspect the problem lies in how I run the application. I am using Node to execute my index.js file and Express to render index.html.
Here is a link to it along with my file paths: