Why is my stylesheet applying to all my ejs files?

Question

I am creating a nodeJS application using Express, MongoDB and EJS template view engine. I have created my server.js file which creates the server. I have created a separate header.ejs file which I will be including in my other ejs files (like index.ejs, about.ejs, contact..ejs, etc.). However when I create a stylesheet for only header.ejs file the styles are being applied to all the ejs file (index.ejs, about.ejs, etc.) I have placed my header.ejs file in the ./public/partials/ folder and the stylesheet is in ./public/assets/ folder and my index.ejs file is in the ./views/ folder.

I have used app.use(express.static(__dirname + "/public")) in the server.js file and /assets/style.css for index.ejs and /assets/header.css for header.ejs file.

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>

When I put h2 {color: indianred;} in the header.css file the color of even in the index.ejs file changes even though header.css is linked only to header.ejs.

i want only the of header.ejs to change. How do i do that ?

ravibagul91 ravibagul91 · Accepted Answer · 2019-05-03T10:56:23

As you are including header.ejs into index.ejs the css also gets added. That is the reason you are getting this issue.

To overcome this issue add a class/id to h2,

<h2 class="h2_css">Company Logo</h2>

or,

<h2 id="h2_css">Company Logo</h2>

Now add your css like this,

h2.h2_css {color: indianred;}

or

h2#h2_css {color: indianred;}

Why is my stylesheet applying to all my ejs files?

1 Answers