I was just experimenting here and there with ejs because I am new to it. Then I thought why not style elements with a conditional flow? Basically a particular element will look purple when the condition is true and it will look red when it is not. When I style the elements in the tag itself, it works but it doesn’t work when I link a style.css file with it.
<body>
<%if(4>3){%>
<h1 style="color: blue;">4 is more than 3</h1>
<% }else{%>
<h1 style="color: red;">Something is very wrong</h1>
<% }%>
</body>
This worked properly
but when I tried to style it in style.css, it didn’t work. Could you please tell me the reason?
EJS file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>To Do List</title>
</head>
<body>
<%if(4>3){%>
<h1 id="one">4 is more than 3</h1>
<% }else{%>
<h1 id="two">Something is very wrong</h1>
<% }%>
</body>
</html>
CSS file:
#one{
color: purple;
}
#two{
color: red;
}
The output:
