I'm having trouble including my external main.css file in my header.ejs file.
I've designated my CSS file as public in my backend Node.js with Express.js server (index.js) using this static code:
app.use(express.static("public"));Then, I connected the header file to the css file like this:
<link href="/Backend/Capstone Project - Public API/public/styles/main.css" rel="stylesheet">
However, none of the CSS styles from the file are showing on the screen (I attempted changing the background color to blue for testing).
Below are the full code snippets:
main.css:
body {
margin: auto;
height: 100vh;
background-color: blue;
}
h1 {
color: aqua;
}
index.js
import express from "express";
import bodyParser from "body-parser";
import axios from "axios";
const app = express();
const port = 3000;
const API_URL = "https://www.thecocktaildb.com/api/json/v1/1/random.php";
// Remaining index.js code here...
app.listen(port, () =>{
console.log(`Server is running on ${port}`);
});
header.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
// Remaining header.ejs code here...
<title>The Cocktails Generator</title>
</head>
<body>
index.ejs:
// Modified index.ejs code here...
footer.ejs
<footer>
Footer
</footer>
</body>
</html>