HTML is not connecting to CSS

I'm having trouble linking my external CSS to my HTML file. In the head of my index.html, I have this code: 

    <head>
        <title>Twenty by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href=".../assets/css/main.css" />
    </head>

This is how my file directory is structured:

  • /node-html

    • /views
      • /assets
        • /css
          • /main.css
      • /fonts
      • /js
      • /images
      • index.html
  • index.js

Any suggestions on how to resolve this issue?

javascripthtmlcssexpress

Answer №1

To access index.html at the same level as assets, use this method:

<link rel="stylesheet" href="assets/css/main.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

Why is the toggle list not functioning properly following the JSON data load?

I attempted to create a color system management, but as a beginner, I find it quite challenging! My issue is: When I load my HTML page, everything works fine. However, when I click on the "li" element to load JSON, all my toggle elements stop working!!! ...

javascriptjqueryhtmlcssjson

What are the steps for transmitting an array of data to Parse Cloud Code?

Trying to send an array of contact emails as a parameter in Cloud Code function for Parse, here is how I am doing it: HashMap<String, ArrayList<String>> params = new HashMap<>(); ArrayList<String> array = new ArrayList<>(); a ...

javajavascriptandroidarraysparse-platform

Having trouble getting Calendly Webhooks to function in a node.js environment with ngrok?

Hello everyone, this is my first time seeking help on Stack Overflow so please bear with me if there are any flaws in my question. I recently started using the Calendly Teams version and decided to implement the Webhooks feature on a Node.js web applicati ...

javascriptnode.jsexpressngrokcalendly

Leverage the power of JSON values by incorporating them directly into HTML tags

My JSON file is generating the following styles: { "h1" : { "font-family" : "Lato", "font-size" : "24px", "line-height" : "28px", "font-weight" : 600, "colorId" : 3, "margin-bottom" : "10px", "margin-top" : "20px" }, "h2" : { ...

htmljsonparsingvue.js

Set the HTML content as a string in the Html variable, similar to innerHTML but without using JavaScript directly from an external

When working in an embedded ruby (html.erb) file, I encounter a situation where I have a string of HTML such as variable_string = "<p>Some <strong>Content</strong></p>". In JavaScript, we can easily update the DOM with Element.inn ...

javascripthtmlruby-on-rails

I am facing issues with jQuery's live and livequery functions when trying to use them with a form that is being loaded dynamically through

Previously, I inquired about a related issue regarding attaching behavior to an element with jQuery after insertion. However, I have not yet found a solution. For clarity's sake, I am posing a new question with a different scenario. Below is the code ...

javascriptjqueryajaxlivelivequery

What is the best way to hide certain buttons from specific users in Angular using the If condition?

I am facing an issue with my array of blocked_users, where I need to hide certain buttons if a user is in the blocked_users list. Below is the code snippet from my angualr.component.html: <div *ngIf="!(userId in event.blocked_users)"> ...

htmlangular

Troubleshooting CSS issues in a Docker container running a VueJs project

I have successfully set up a VueJs project on AWS using Docker. Following the guidelines in the Real-World Example section of the documentation, I created a Dockerfile with instructions to copy my nginx conf file: # build stage FROM node:lts-alpine as buil ...

cssvue.jsnginx

Determine the current position of the cursor within a contenteditable division

I came across this code snippet on a forum to determine the cursor position in a contenteditable div, but unfortunately it consistently returns 0. Here is the function responsible for retrieving the cursor position: new function($) { $.fn.getCursorPo ...

jqueryhtmlcontenteditablecaretcursor-position

How can I change the displayed value of a 'select' element programmatically in Internet Explorer?

My interactive graphic has a drop-down menu implemented with a <select> element. Everything functions correctly, except when using Internet Explorer. The issue arises when attempting to programmatically change the selected value of the <select> ...

javascripthtmlformsd3.js

Utilize Boolean operators such as AND, OR, and NOT to locate specific keywords within a text, mirroring the search capabilities

Is it possible to perform Google-style searches in strings using operators like "or", "and" and "not" with regular expressions? For instance, I aim to search for the words "Javascript", "PHP" and "Perl" within a given string in these ways: Javascript an ...

phpjavascriptregexperl

Encountering a theme issue in the makeStyles function within Material-UI version 5

While working on some React components, I created a styles.js file for each of them. I am following a YouTube tutorial that uses material-ui version 4, so I decided to upgrade to V5. Code snippet for the component (Form): import React from 'react&apo ...

javascriptreactjsmaterial-ui

I require displaying the initial three letters of the term "basketball" and then adding dots

Just starting out with CSS and struggling with the flex property. Seems to work fine at larger sizes, but when I reduce the screen size to 320px, I run into issues... Can anyone help me display only the first three letters of "basketball ...

javascripthtmlcss

The functionality of collapsing rows of cards in Bootstrap does not seem to work efficiently for multiple

There is a button that appears and the #more div is hidden. However, when I click "Show more," the hidden content does not appear. Could this be due to multiple rows? Should I add collapse to every card? I am using Bootstrap 4. Here is the code snippet: ...

htmlwebbootstrap-4frontend

Expand the image size when hovering using CSS

I want to make a simple image link button that enlarges when I hover over it. The code below accomplishes this, but I also want to move the paragraph when the image gets larger. Any suggestions on how I can select and move the paragraph when I hover over ...

htmlcss

Could you clarify that for me?

Let's take a look at the function isIsogram(str) which checks if a string is an isogram. An isogram is a word or phrase in which no letter occurs more than once. The code snippet for this function can be seen below: We are particularly interested in ...

javascripthtmlcss

Using middleware in Express to handle GET requests

Can the request object sent to any route be accessed globally in Express, without having to explicitly access it in a .get method or similar? ...

javascriptnode.jsexpressnpm

An error was thrown: Unexpected token ILLEGAL was detected

Working with Liferay 5.2 I would like to show a message related to the current language of Liferay. The code for this message is in Velocity language and can be found in navigation.vm file. <div id="navigation" class="sort-pages modify-pages"> ...

javascriptliferay-velocity

Updating Text in Backbone.js Event

Is there a way to activate a change event on a text box within a backbone view? I attempted the following: events: { "onChanged input.autocomplete": "update" } The update fu ...

javascriptbackbone.js

Using Java beans to present form data utilizing session

How can I utilize Java Beans and session beans to store user input data and display a preview of the entered details on the next page? I have already created a servlet using JSP, but now I want to incorporate Java Beans to showcase the form data. How shoul ...

javascripthtmljquerycssjavabeans