im working on node.js(express) with ejs and im not able to include a .css file to it.i tried the same thing seperately as a html-css duo and it worked fine...how can i include the same in my .ejs file. My app.js goes thus:
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.get('/', function(req, res){
res.render('index.ejs', {
title: 'My Site',
nav: ['Home','About','Contact']
});
});
app.get('/home', function(req, res){
res.render('index.ejs', {
title: 'My Site',
nav: ['Home','About','Contact']
});
});
app.get('/about', function(req, res){
res.render('about.ejs', {
title: 'About',
nav: ['Home','About','Contact']
});
});
app.get('/contact', function(req, res){
res.render('contact.ejs', {
title: 'Contact',
nav: ['Home','About','Contact']
});
});
app.listen(3000);
and the index.ejs file:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1> <%= title %> </h1>
<ul>
<% for (var i=0; i<nav.length;i++) {%>
<li><a href="/<%=nav[i]%>"> <%=nav[i]%> </a></li>
<% } %>
</ul>
</div>
<br>
<h3>Node.js</h3>
<p class='just'>Express is agnostic as to which templating language you use. Templating languages can be a hot topic of debate.Here Iam going to use Jade.</p>
<p class ='just'>Again Express is agnostic to what you use to generate your CSS-you can use vanilla CSS but for this example I'm using Stylus.
</p>
<footer>
Running on node with express and ejs
</footer>
</home>
</html>
style.css file:
<style type="text/css">
body { background-color: #D8D8D8;color: #444;}
h1 {font-weight: bold;text-align: center;}
header { padding: 50px 10px; color: #fff; font-size :15px; text-align:right;}
p { margin-bottom :20px; margin-left: 20px;}
footer {text-decoration: overline; margin-top: 300px}
div { width:100%; background:#99CC00;position:static; top:0;left:0;}
.just
{
text-align: center;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#0B614B;} /* visited link */
a:hover {color:#B4045F;} /* mouse over link */
a:active {color:#0000FF;}
ul { list-style-type:none; margin:0; padding:0;text-align: right; }
li { display:inline; }
</style>
