Issues with CSS not loading correctly in Express application

I have the following code in my app.js file:

app.use(express.static(`public`));
And in my HTML, I'm including a stylesheet like this:
<link rel = `stylesheet` href = `css/styles.css`/>
However, none of the styles from the stylesheet seem to be applied. What should I do?

This is a snippet of my HTML:

<!DOCTYPE html>
<html lang = `en` dir = `ltr`>
<head>
  <meta charset = `utf-8` />
  <script src="https://kit.fontawesome.com/51479f1cdc.js" crossorigin="anonymous"></script>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7d7b6c7f4f3a213d213f226d6a7b6e3e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <link rel = `stylesheet` href = `css/styles.css`/>
  <title>Starting Files</title>
</head>

<body>
  <div class = `container full-height-container`>
    <div class = `home-container`>
      <i class = `fas fa-key fa-6x`></i>

      <h1 class = `display-3 heading`>Secrets</h1>

      <p class = `lead`>
        Don't keep your secrets, share them anonymously.
      </p>
      <hr/>

      <div class = `button-container`>
        <a class = `btn btn-primary btn-lg` href = `/register` role = `button`>Register</a>
        <a class = `btn btn-dark btn-lg` href = `/login` role = `button`>Log in</a>
      </div>
    </div>
  </div>

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78299859987aad5d2c3d686">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>

Inside the public folder, there is a subfolder named css which contains a file called styles.css.

Answer №1

The issue with the styles.css not functioning properly was due to the usage of backticks within the

<link rel = `stylesheet` href = `css/styles.css`/>
instead of quotation marks. While backticks may work in JavaScript, they do not work in HTML.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The react transition group fails to add the necessary CSS classes to the specified div

Regardless of whether I utilize React transition group, Tailwind, pure CSS, or any other framework, no transitions seem to occur when I structure my simple component in the following manner. I have experimented with various frameworks, but the outcome rema ...

Store the response data in a global variable or forward it to another function in Node.js using Express JS

I'm currently working on a function that makes a post request to an API (app.post), sending a token and a URL for redirection to webpay. The challenge I'm facing is saving that token in a global variable so that it can be accessed by another func ...

I am currently working on a website that offers different themes, and I am attempting to update the iframe to reflect the selected theme on the site

I'm feeling lost on how to accomplish this task. Despite my efforts, I have been unable to find a solution so far. Perhaps utilizing javascript might be the key here, yet I am uncertain about integrating it into the existing script that I use for modi ...

Styling pagination for jquery dataTable

I've been looking into how to modify the pagination design, but haven't had much luck finding information on it. Currently, the table displays the standard default pagination style with the following jquery code. $('#id_view_student_table&a ...

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

I recently added a linear-gradient to an image in my NativeScript 8 app. Surprisingly, it seems to work perfectly on iOS, but I'm encountering some issues on Android. Despite trying solutions like using -webkit-linear-gradient(), the desired effect is ...

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Is there an easy method to populate two columns, each with a width of 50%, with photos in a way that the next photo is always added to the column with more available space? The photos come in different sizes but should be able to fit within the width of t ...

Node: How to access req.db within a function without direct access to req object

I'm currently working on integrating Facebook authentication into my app using passport. Everything seems to be functioning properly, but I'm encountering an issue where I need to access the database within the passport.use() function. Below is ...

What are some ways to expand the width and increase the spacing of bootstrap cards?

On my website, I have created Bootstrap cards that are displayed on two different pages. One set of cards is shown on the landing page, where I am looking to increase the spacing between them. The other set appears on the books page, and I want to make t ...

Error encountered when attempting to listen on port 80 with Node.js and Express framework

My goal is to run a node application on my Windows machine. This specific application utilizes 'express' which listens to port 80. However, when I attempt to run it, I encounter the following error message: Error: bind EACCES 127.0.0.1:80 I am ...

Issue with Bootstrap carousel - the carousel.on method is not recognized

I have implemented a standard Bootstrap carousel in my project: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"> ...

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

Configuring Node.js and express.js for my personal website to showcase my projects

I am new to node.js and I'm excited to implement it on my personal website as a way to start learning. I have successfully set up the node server, but I am struggling with setting up routing using express.js. All my files are typical static files like ...

Error: The JSON data contains an unexpected token at the beginning Express

I am currently following a tutorial (here) to establish a connection between Express and React Native. I have a server.js script running which connects to the client (App.tsx) on my IP address using port 3000. The server and app are running simultaneously ...

How do I create a Bootstrap 4 multi-level navigation bar that drops to the right on the third level?

clickable dropdown hover dropdown.jpg Source: Is there a way to create a dropdown menu that opens to the right like the clickable version, rather than to the left like the hover dropdown in the provided example? I'm open to other solutions as long ...

I am facing an issue where HTML is not loading images or some parts of my CSS in PHP

I've been working on connecting my website to a MySQL database using PHP. Initially, I thought I could keep the HTML and CSS the same, but after adding everything, the images on the website stopped showing up as they did before. The fonts and other el ...

What Triggers the Creation of Background Threads in Nodes?

Lately, I have been delving into Node.js and working on a project that requires non-blocking parallelism, which Node is known for. However, I am still unclear about the specifics of when a separate thread is created to handle processing tasks. From my unde ...

JavaScript - Reveal a div when a grid item is clicked

I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, p ...

The hover effect on sibling elements is not functioning for the <img> tag

When you hover over the image displayed within the <div class="like absolute">, the image within the <div class="balloons absolute"> doesn't appear. <div id="container" class="relative"> <div class="like absolute"> ...

Issue with [rowHovered] directive in PrimeNG Table when cell-background is defined

I am working with a scrollable TreeTable where I have defined the rowHover attribute in the following manner: <p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeigh ...

What is causing justifyContent: space-between not to function properly?

I want to display Text1Text2Text3Text4Text5Text6Text7 at the top with text alignment using justifyContent: 'space-between'. However, when I tried to do so, all texts ended up at the top. <div style={{display: 'flex-item', flex: 1, ...