How to include CSS files in EJS View Engine?

How to include css files using NodeJS, Express, and EJS?

Last Updated : 24 Apr, 2025

CSS stands for “Cascading Style Sheet”. It is used to style web pages. CSS simplifies the process of making web pages presentable. It describes how web pages should look it prescribes colors, fonts, spacing, and much more. Including CSS files is important for styling web pages in web development with Node JS, Express, and EJS. In this article, we will explore the process of including CSS in such projects to enhance the visual appeal and user experience.

Steps to include CSS files using NodeJS, ExpressJS, and EJS:

Step 1: let's create a new NodeJS project. Open your terminal and run the following commands:

npm init -y

Step 2: Install the necessary package in your file using the following command.

npm install express ejs

Project Structure:

Screenshot-2024-02-25-111917 — Project Structure

The updated dependencies in the package.json file will look like this.

"dependencies": {
      "ejs": "^3.1.6",
      "express": "^4.17.1"
}

Here, we will demonstrate how to include CSS files using Node.js, Express, and EJS

JavaScript

// app.js

// Required modules
const express = require('express');
const path = require('path');

// Create Express app
const app = express();

// Set up static file serving
app.use(express.static(path.join(__dirname, 'public')));

// Set up EJS as the view engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Define route for the homepage
app.get('/', (req, res) => {
    res.render('index');
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

HTML

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="/styles/main.css">
</head>

<body>
  <h1>Welcome to My Website</h1>
  <p>This is a sample paragraph.</p>
</body>

</html>

CSS

/* public/styles/main.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #b00a0a;
}

p {
    color: #7051e9;
}

Start your application using the following command.

node server.js

Output:

Screenshot-2024-02-25-112437 — CSS applied to EJS

How to include CSS files in EJS View Engine?

H

hanishj

Improve

Article Tags :

Similar Reads

How To Render Dynamic Lists Using EJS and Express ?

Rendering of dynamic lists in EJS and Express mainly allows us to dynamically generate the HTML content which is based on the data from the backend server. We can render dynamic lists using the '<% %>' tags. Steps to Render Dynamic ListsStep 1: Create a directory for the projectmkdir rootcd ro

How to Download a File using Express.js ?

Express.js is a routing and middleware framework for handling the different routing of the webpage and it works between the request and response cycle and works on the top of the node.js server. In this article, we will discuss how to download a file using express.js. ApproachTo download a file usin

How to include CSS files in EJS View Engine?

Including CSS files is important for styling web pages in web development with Node.js, Express, and EJS. In this article, we will explore the process of including CSS in such projects to enhance the visual appeal and user experience. Approach to include CSS file in EJS:We're building a Node.js web

How to Include CSS Inside a JavaScript File?

Here are the various ways to include CSS inside a JavaScript file. 1. Using style Property (Inline Styling)The simplest way to include CSS in JavaScript is by directly modifying the style property of an HTML element. This method applies styles inline, directly to the elements, and overrides any exte

How to render JSON in EJS using Express.js ?

EJS (Embedded JavaScript) is a templating language that allows dynamic content generation in NodeJS applications. It allows us to embed JavaScript code directly into Our HTML code, and with the help of that we can generate the dynamic content on the server side. So with the help of ejs, we can perfo

How to Include One CSS File in Another?

Here are the methods to include one CSS file in another: Method 1. Using @import RuleThe @import rule allows you to import one CSS file into another, enabling modularity and reusability of styles. [GFGTABS] html <html> <head> <link rel="stylesheet" href="styles.css

How to Add Express to React App using Gulp ?

When building a web application with ReactJS, you may need to include a backend server for handling server-side logic and API requests. Express is a popular choice for creating backend servers in Node.js. In this tutorial, we'll explore how to integrate Express with a React app using Gulp as the bui

How to do Templating using ExpressJS in Node.js ?

Template Engine : A template engine basically helps us to use the static template files with minimal code. At runtime, the template engine replaces all the variables with actual values at the client-side. Templating Engine Examples: EJS (Embedded JavaScript Templating) Pug Mustache In this article w

How to add .css file to ejs

Styling is one of the most important parts of web development as it enhances the visual appearance of a website. In today's era visual presentation of content holds immense importance. EJS, short for Embedded JavaScript offers a seamless integration of JavaScript functionality within HTML templates.

How to Create Global Variables Accessible in all Views using Express/NodeJS ?

In Express.js, global variables can be immensely useful for sharing data across multiple views or middleware functions. Whether it's storing user authentication status, site-wide configurations, or any other frequently accessed data, global variables streamline development and enhance code organizat