Unable to Locate CSS File in Separate Folder in HTML

I am struggling to link my stylesheet from a different directory to my HTML files, even though I believe I am using the correct method. Could it be that I am targeting the wrong level?

'-' represents levels

Take a look at my file structure:

myProject (Parent)

-public (1st level)

--stylesheets (2nd level)

---styles.css (3rd level)

-Views (1st level)

--index.ejs (2nd level)

Here's how my HTML looks:

  <!doctype html>
    <html>
    <head>
        <title>Node Authentication</title>
            <link rel="stylesheet" type="text/css" href="../styles.css">


    </head>
htmlcssnode.js

Answer №1

If you have implemented the Express Static middleware like this in your application :

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

Then within your view file :

<!doctype html>
<html>
<head>
    <title>Node Authentication</title>
        <link rel="stylesheet" type="text/css" href="stylesheets/styles.css">

</head>

Answer №2

In case myProject represents your html document, you can experiment with the following:

<link rel="stylesheet" type="text/css" href="public\stylesheets\styles.css" />

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

Activate event starting from parent and ascending through child nodes

When I have a table inside a <div class="timely"></div>, and within that table is a <th class="prev"><i>previous</i></th>, Chrome developer tools show an event listener on the <th>. However, Firefox developer tools ...

javascriptjqueryhtmleventsevent-handling

What is the best way to target and style anchor links in CSS that are not empty?

Hi there! I am on the hunt for a CSS selector that will target all anchor links that are not empty and contain content. I currently have a selector to identify all links with an anchor attribute, like in this example: a[href*=\#] { background-co ...

htmlcsscss-selectors

Why isn't the default value appearing on page load in jQuery?

I have a set of radio buttons with five different values. For each value selected, a corresponding span tag is generated with a description associated with that specific radio button option. Here's an example: <table class="jshop"> <tbod ...

phpjqueryhtml

Mongoose: Why does Model.save() not update the array of objects in my MongoDB collection?

I am facing an issue with my MongoDB where the data I'm trying to save specifically from an array is not being saved, while every other property is being saved normally. Below is my Schema: const mongoose = require('mongoose'); const SubS ...

node.jsmongodbexpressmongoose

Automating web tasks through Excel VBA with SeleniumBasic has been a game-changer for me. However, I am facing

My aim is to load the messages found using WDrv.FindElementsByXPath("//*[@id='divMessageLines']/div"), but I am unsure of how to retrieve the values individually. The number of values for each search varies. The HTML segment in questio ...

htmlvbaseleniumwebautomation

Adding query parameters to the end of every link on a webpage

Wondering how to automatically add GET values to the end of each anchor href on a webpage? For instance, if you input google.com?label=12&id=12 I want to ensure that "?label=12&id=12" gets added to the end of every single href in an anchor tag on ...

javascriptphphtml

The usage of "use strict" has caused a conflict between Node.js and eslint

When I checked my code with ESLint, I was surprised to see that it was recommending that I remove the "use strict" declaration at the top of my index.js file. This puzzled me, especially since my code is similar to the simple server example on https://node ...

node.jsstricteslint

"If the filesystem.writefile function in Node.js returns a successful result, then the conditional statement will

Is it accurate to say that fs promise writeFile and fs writeFileSync function in the same way? Or is there a difference in their behavior? const fs = require('fs') const fsProm = require ('fs').promises //write file sync fs.writeFileSy ...

node.jsexpresswritefile

What causes absolute positioning to separate each word onto its own line? Is there a solution to this issue?

Why does each word in a child element (class .second) get wrapped onto a new line when using absolute positioning? Is there a way to keep the parent element (class .first) as a round shape, while also ensuring the child element is centered below it and has ...

htmlcsslayout

The vertical alignment of floated elements in HTML is not correctly positioned

The result of the code is not as expected. The right section should be aligned with the left, but it appears below instead. This is the code I am using: <!-- footer begin --> <footer> <div > ...

html

Wordpress Bubble Notification - Conceal at Zero / Reveal at One or More

I am a beginner in PHP and CSS. After extensive reading and learning little by little, I successfully implemented notifications in my project using PHP and CSS. It functions properly, displaying the counts (friends, messages, and notifications) and redire ...

phpcsswordpressnotifications

Make sure to keep "display:inline-block" in place while using fadeTo()

As a design student, I am working on creating a family tree website where users can click on individual circles (ancestors) to view their lineage. Everything has been functioning smoothly so far, except for when attempting to display the lineage of specifi ...

jqueryhtmlcssdisplay

A table featuring an HTML select element that allows users to choose from preset options or manually enter

My goal is to incorporate a select box where users can either choose from a set list of options or input their own custom value. The select element is nested within a table. Unfortunately, using datalist is not a viable solution for me in this case. I have ...

javascriptjquerycsshtml-table

Only a select few expandable elements in the jQuery accordion

How can I create an accordion menu with only a few expandable options? I am looking to include the following items in my menu: Home, Support, Sales, Other The "Home" option is just a link without any sub-menu. Clicking on it should direct users to a spec ...

javascriptjqueryhtmlcssaccordion

A step-by-step guide on toggling between light mode and dark mode using water.css

Implementing the water.css on my website, I have this JavaScript code: function setTheme(themeName) { localStorage.setItem('theme', themeName); document.documentElement.className = themeName; } // function to toggle between light and dark ...

javascripthtmlcss

The alignment of inline contenteditable tags is not working properly in Internet Explorer

I am facing an issue where inline contenteditable span tags are working fine in all browsers except for IE. In Internet Explorer, the tags are not acting as inline and instead aligning themselves as block elements. This behavior seems to be caused by IE wh ...

cssinternet-explorerinlinecontenteditable

Leveraging Font Awesome and Material Icons within ngFor in Angular 2

I have a unique situation where I need to display a dynamic list of icons in a right side bar. These icons are added to the sidebar based on user actions and are displayed using the ngFor directive. The challenge here is that some icons come from Font Awe ...

cssangularfont-awesomengforgoogle-material-icons

Tips for implementing border-radius on Internet Explorer 8:

Similar Question: How to create rounded borders in IE8 using CSS? I typically use css border-radius for the design of my webpages. While they display well in Firefox, I am facing compatibility issues with IE8. Can anyone offer any assistance? Thank yo ...

internet-explorer-8bordercss

Animated slide-out menu with icon using jQuery

I am in the process of creating a menu using CSS and jQuery that will display an icon for each menu item. When a user hovers over a menu item for 0.5 seconds, I want it to slide slowly to the left to show the name of the menu. This is similar to what you ...

jqueryhtmlcss

Navigable MEAN.js paths for CRUD operations

Exploring the world of MEAN stack with mean.js as my structure framework. Playing around with Express and Angular routing to understand how it all works. Here's one of my server routes: app.route('/api/projects/:projectId') .get(users. ...

angularjsnode.jsexpressangular-ui-routermean-stack