Including a .css file in ejs

Question

Including a .css file in ejs

I'm currently developing an application using Node.js (express) with EJS, and I'm facing an issue while including a .css file in it. When I tried the same setup as a standalone HTML-CSS project, it worked perfectly fine. How can I include the CSS file in my .ejs file? Here is how my app.js looks:


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'] 
  });
});

// more routes...

app.listen(3000);

And here is the content of 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>
    &nbsp;  
    <% } %>
    </ul>
</div>

<br>
<h3>Node.js</h3>
<p class='just'>Express is agnostic to which templating language you use. The choice of templating language can be subjective.</p>
<p class ='just'>It's also worth noting that Express doesn't enforce any specific CSS preprocessor. For this example, Stylus is utilized.</p>
<footer>
Running on node with express and ejs
</footer>
</home>
</html>

The style.css file content:

<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>

css node.js express ejs

Answer 1

Answer №1

Your issue is not specific to ejs, it applies to general web development practices.

There are two important points to consider:

style.css should be an external css file and thus does not require style tags within the file. The file should only contain the css styles.
In your express application, ensure that you specify the public directory from which static files such as css, js, and images are served.

This can be achieved by adding the following line in your app:

app.use(express.static(__dirname + '/public'));

Assuming you have placed your css files within the public folder of your app root, you need to reference them correctly in your template files, for example:

<link href="/css/style.css" rel="stylesheet" type="text/css">

In this scenario, it is assumed that the css file is located within the css folder inside the public directory.

The folder structure would look like this:

.
./app.js
./public
    /css
        /style.css

Answer 2

Your issue is not specific to ejs, it applies to general web development practices.

There are two important points to consider:

style.css should be an external css file and thus does not require style tags within the file. The file should only contain the css styles.
In your express application, ensure that you specify the public directory from which static files such as css, js, and images are served.

This can be achieved by adding the following line in your app:

app.use(express.static(__dirname + '/public'));

Assuming you have placed your css files within the public folder of your app root, you need to reference them correctly in your template files, for example:

<link href="/css/style.css" rel="stylesheet" type="text/css">

In this scenario, it is assumed that the css file is located within the css folder inside the public directory.

The folder structure would look like this:

.
./app.js
./public
    /css
        /style.css

Answer 3

Answer №2

If you want to add a static CSS file to your express app (for styling ejs "templates" files), here are the straightforward 3 steps you need to follow:

First, place your CSS file named "styles.css" in an "assets" folder within a "public" folder. The relative path to the CSS file should be "/public/assets/styles.css"
In each of your ejs files, include the CSS file by linking it in the <head> section using
```
<link href="/public/assets/styles.css" rel="stylesheet" type="text/css" />
```
In your server.js file, use the app.use() middleware with express.static() to serve up static CSS files. Also, specify a request route that will respond to and serve up the files from the public folder every time the middleware is called.

After completing these 3 steps, whenever you use res.render('ejsfile') in your app.get() methods, the CSS styling will automatically be applied. Test this by accessing your routes in the browser.

Answer 4

If you want to add a static CSS file to your express app (for styling ejs "templates" files), here are the straightforward 3 steps you need to follow:

First, place your CSS file named "styles.css" in an "assets" folder within a "public" folder. The relative path to the CSS file should be "/public/assets/styles.css"
In each of your ejs files, include the CSS file by linking it in the <head> section using
```
<link href="/public/assets/styles.css" rel="stylesheet" type="text/css" />
```
In your server.js file, use the app.use() middleware with express.static() to serve up static CSS files. Also, specify a request route that will respond to and serve up the files from the public folder every time the middleware is called.

After completing these 3 steps, whenever you use res.render('ejsfile') in your app.get() methods, the CSS styling will automatically be applied. Test this by accessing your routes in the browser.

Answer 5

Answer №3

If you want to include custom CSS in your site, you can follow these steps:

     var fs = require('fs');
     var myCss = {
         style : fs.readFileSync('./style.css','utf8');
     };

     app.get('/', function(req, res){
       res.render('index.ejs', {
       title: 'My Site',
       myCss: myCss
      });
     });

To apply the custom CSS from the template, use the following code:

   <%- myCss.style %>

Create a file named style.css with the following content:

  <style>
    body { 
     background-color: #D8D8D8;
     color: #444;
   }
  </style>

This method worked well for me when I needed to add some custom styling to my project.

Answer 6

If you want to include custom CSS in your site, you can follow these steps:

     var fs = require('fs');
     var myCss = {
         style : fs.readFileSync('./style.css','utf8');
     };

     app.get('/', function(req, res){
       res.render('index.ejs', {
       title: 'My Site',
       myCss: myCss
      });
     });

To apply the custom CSS from the template, use the following code:

   <%- myCss.style %>

Create a file named style.css with the following content:

  <style>
    body { 
     background-color: #D8D8D8;
     color: #444;
   }
  </style>

This method worked well for me when I needed to add some custom styling to my project.

Answer 7

Answer №4

It seems like you're utilizing EJS with express.js

There's a more efficient method for incorporating EJS
```
 app.set("view engine", "ejs");
```
and in order to do so, your file structure should resemble this:
```
 .
 ./app.js
 ./view
     /index.ejs
```
To add CSS to your EJS file, it's necessary to utilize the "public" folder (or any alternative name)

In order to access that, you can implement the following:
```
 app.use(express.static("public"));  //a better and newer approach than the initial solution
```
Within your EJS file, you can connect your CSS by using:
```
 <link rel="stylesheet" href="css/style.css">
```
This assumes that your CSS file is located within the CSS folder inside the public directory

Therefore, your file structure will be as follows:
```
 .
 ./app.js
 ./public
     /css
         /style.css
 ./view
     /index.ejs
```

Answer 8

It seems like you're utilizing EJS with express.js

There's a more efficient method for incorporating EJS
```
 app.set("view engine", "ejs");
```
and in order to do so, your file structure should resemble this:
```
 .
 ./app.js
 ./view
     /index.ejs
```
To add CSS to your EJS file, it's necessary to utilize the "public" folder (or any alternative name)

In order to access that, you can implement the following:
```
 app.use(express.static("public"));  //a better and newer approach than the initial solution
```
Within your EJS file, you can connect your CSS by using:
```
 <link rel="stylesheet" href="css/style.css">
```
This assumes that your CSS file is located within the CSS folder inside the public directory

Therefore, your file structure will be as follows:
```
 .
 ./app.js
 ./public
     /css
         /style.css
 ./view
     /index.ejs
```

Answer 9

Answer №5

Instead of the traditional method, I decided to take a new approach. I set up an ejs file named styles.ejs specifically for my styles and placed all the CSS code within appropriate tags.

<style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    #wrapper {
      margin: 0 auto;
      padding: 15px;
      border: 5px solid #f44336;
    }
</style>

After that, I included this file in the head section of my index.ejs document like so:

<head>
   <%- include('./css/styles'); %>
</head>

This approach proved to be successful for my project.

Answer 10

Instead of the traditional method, I decided to take a new approach. I set up an ejs file named styles.ejs specifically for my styles and placed all the CSS code within appropriate tags.

<style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    #wrapper {
      margin: 0 auto;
      padding: 15px;
      border: 5px solid #f44336;
    }
</style>

After that, I included this file in the head section of my index.ejs document like so:

<head>
   <%- include('./css/styles'); %>
</head>

This approach proved to be successful for my project.

Answer 11

Answer №6

To include static files, you can use the following code snippet:

app.use(express.static(__dirname + '/public'));

Create a directory named public in the root folder of your project and place all your style files inside this public folder. Update your CSS link code as shown below.

<link href="/css/style.css" rel="stylesheet" type="text/css">

Your folder structure should look like this:

.
./app.js
./public
   /style.css

Answer 12

To include static files, you can use the following code snippet:

app.use(express.static(__dirname + '/public'));

Create a directory named public in the root folder of your project and place all your style files inside this public folder. Update your CSS link code as shown below.

<link href="/css/style.css" rel="stylesheet" type="text/css">

Your folder structure should look like this:

.
./app.js
./public
   /style.css

Including a .css file in ejs

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Strategies for limiting a table row in JavaScript or jQuery without utilizing the style tag or class attribute for that specific row

CSS Only flyout navigation - reveal/hide with a tap or click

Can someone explain why the console.log(items) command seems to be executing twice

Changing buffer from base64 to UTF-8 encoding in Node.js

Highlighting the current menu item by comparing the URL and ID

Trying to reduce the cursor box area within an A link containing a div box

Documentation for the API endpoint is not currently visible through the utilization of Swagger and Express

Is it possible for API calls and database queries to create a bottleneck? Exploring the impact of Node.js and

Tips for correctly displaying partial views and incorporating JavaScript files via AJAX in Express/Jade?

How can you make the coordinates of the cursor track the cursor when it hovers over a rectangle?

Failed to access the 'totalQty' property as it is undefined

Error loading module - Firebase Cloud Functions module not found

css code creates a stable block with a blurred transparent effect

Transitioning between sections by clicking on a navigation menu item

Adjusting the size of icons to fit within a container

Error message: "Maximum width header anomaly"

How can you ensure a code snippet in JavaScript runs only a single time?

Upon installation, swagger may generate a notification about a dependency concern

Browsing through the last items on a webpage

Node Express JS: Efficiently handling multiple fetch responses before sending data to client