Currently, I am in the process of developing a nodeJS application utilizing Express, MongoDB, and EJS template view engine. The server.js file has been successfully created to establish the server. In addition, a separate header.ejs file has been implemented for inclusion in other ejs files such as index.ejs, about.ejs, contact.ejs, etc. However, upon creating a stylesheet solely for the header.ejs file, the styles are being applied across all ejs files including index.ejs and about.ejs.
The header.ejs file is located within the ./public/partials/ directory, while the associated stylesheet can be found in the ./public/assets/ folder. Furthermore, the index.ejs file resides in the ./views/ folder.
Server.js
app.set('view engine' , 'ejs');
app.use(express.static(__dirname + "/public"));
app.use(employeeController);
employeeController.js
router.get('/employee' , function(req, res){
res.render("index");
});
module.exports = router;
header.ejs
<link rel="stylesheet" href="assets/header.css">
<h2>Company Logo</h2>
index.ejs
<link rel="stylesheet" href="/assets/style.css">
<% include ../public/partials/header.ejs %>
<h2>Please Enter the New Employee Information</h2>
It's important to note that defining 'h2 {color: indianred;}' in the header.css file resulted in a color change not just in the header.ejs file, but also in the index.ejs file despite the linkage being exclusive to header.ejs.
In order to restrict the color change to only the h2 element of header.ejs, what measures should be taken?