How to add .css file to ejs
Last Updated :
28 Apr, 2024
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. While EJS is very good in dynamic content generation it falls apart in styling. So, here CSS (Cascading Style Sheets), steps in. In this article, we will be learning how to add CSS in EJS to improve the visual presentation of a website.
We will discuss the approach of .css file to EJS:
Inline CSS: using <style> tag within the EJS template
In this approach, we embed CSS directly into the EJS template using the <style> tag. This approach provides simplicity but it is not recommended for large projects as adding CSS into the EJS template could make it more complex instead of simplifying.
HTML
<style>
/* CSS styles here */
</style>
External CSS: Linking an external .css file
Linking a external CSS file to EJS is the best approach as it reduce complexity of code and increase reusability of code.
HTML
<link rel="stylesheet" type="text/css" href="styles.css">
Steps to Create a NodeJS App and Installing Module:
Step 1: First of all you need to create the new directory for your project. You can do it by using 'cd' command in your terminal
cd project_name
Step 2: Now, initialize your project through 'npm init'.
npm init -y
Step 3: Now, to use EJS you need to install EJS package. You can do it bu using 'npm install ejs' command in your terminal and also install `express` through `npm install express`.
npm install ejs express
Step 4: Now, the final step is to crete an EJS template file like index.ejs and in CSS file like style.css.
Project structure:

Updated dependencies in package.json:
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.19.2"
}
Example: Below is an example of .file to ejs.
JavaScript
const express = require('express');
const app = express();
// Set EJS as the view engine
app.set('view engine', 'ejs');
// Serve static files from the 'public' directory
app.use(express.static('public'));
// Define a route to render the index.ejs file
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}`);
});
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeeksForGeeks EJS Template</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<header class="header">
<h1>Welcome to GeeksForGeeks</h1>
</header>
<main class="main-content">
<p>This is a basic EJS template with external CSS styling.</p>
<p>Explore the world of coding and technology with GeeksForGeeks.</p>
</main>
<footer class="footer">
<p>© 2024 GeeksForGeeks. All rights reserved.</p>
</footer>
</body>
</html>
JavaScript
/* External CSS Styles for GeeksForGeeks EJS Template */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.header {
background-color: #2eb82e;
color: #fff;
text-align: center;
padding: 20px;
}
.main-content {
padding: 20px;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
Output:
Output
Similar Reads
How to Add CSS Adding CSS (Cascading Style Sheets) to your HTML is essential for creating visually appealing and user-friendly web pages. In this guide, we will explore the three primary methods to link CSS to HTML documents: inline, internal, and external CSS. Each method has its advantages and best-use scenarios
3 min read
How to load CSS and JS files dynamically ? Generally, the CSS and JS files are included statically with HTML code. It means they are written in the script or the link tag in the  HTML code. But this slows down the execution as a bulk of code is loaded unnecessarily. It may or may not use the functionality related to that DOM element. So dyna
5 min read
How to import a CSS file in React ? In React applications, styling is a crucial aspect of creating visually appealing and responsive user interfaces. CSS (Cascading Style Sheets) files are commonly used to define styles for React components. Importing CSS files into React components allows developers to apply styles to specific elemen
3 min read
How to Add Tailwind CSS to HTML ? Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows.Integration Options:CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm: In
3 min read
How to make .js variables accessible to .ejs files ? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. It is possible to access JS variable in .ejs file.You just need to pass the JS object as second parameter of res.render() method. Let's jump into deep. Project Structure: Final folder structure will be as s
3 min read
How to include css files using NodeJS, Express, and EJS? 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 wit
2 min read
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.html<html> <head> <link rel="stylesheet" href="styles.css"> </head> <body>
3 min read
How to Link a CSS to HTML? To link a CSS file to an HTML file, Create a separate CSS file (styles.css) and write styles on it. Now we need to use the <link> element inside the <head> section of the HTML file to attach the CSS file.Syntax:<link rel="stylesheet" href="styles.css">rel="stylesheet": It specifies
3 min read
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
3 min read
How to load CSS files using JavaScript? The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document. Approach:Use the document.getElementsByTagName() method to get HTML head element.Create a new link
2 min read