What could be the reason for the CSS file not getting applied to the HTML in my project?

Having trouble applying an external CSS file to my HTML file.

Currently working on a Cloud IDE (goormIDE, similar to C9) and trying to link an external CSS file to my HTML file on the web server using Node.js. However, the CSS file is not being applied to the HTML. I've done extensive research but can't seem to find a solution.

The project consists of 3 main files: index.html, style.css, and main.js. They are all located in the same folder.

index.html

<!doctype html>
<html>
    <head>
        <title>YOONJONG</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css" >

    </head>
    <body>
    <a href="intro.html">INTRO</a>
    <a href="portfolio.html">PORTFOLIO</a>
    <a href="board.html">BOARD</a>
    <a href="contact.html">CONTACT</a>
    <p>blahblah</p>

    </body>
</html>

style.css

a {
    font-size: 36px;
    font-weight: 800;
}
p {
    font-size: 20px;
}

main.js

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url = request.url;
if(request.url == '/'){
  url = '/index.html';
}
if(request.url == '/favicon.ico'){
  response.writeHead(404);
    response.end();
    return;
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname + url));

});
app.listen(80);

Answer №1

Consider making the following changes:

<meta charset="utf-8" />
 <link rel="stylesheet" href="style.css" type="text/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

Encountered an issue: ENOTCONN reading error in Nodejs occurred after executing the project

Everything was running smoothly with my Node project a few months back, but now, after integrating sockets, I encountered an error when trying to run the app: Console error in git bash I'm currently using Windows 10 and have experimented with differ ...

PHP is sending incomplete email messages

After implementing a PHP script to send an email upon unsubscribing, I encountered an issue where only part of the email was being sent. Here is a JSFiddle example that represents how the complete email should look, although it may not appear neat due to b ...

Issue Downloading Phonegap From npm

I am facing issues while trying to download phonegap using the command: npm install -g phonegap I keep receiving an error message and I'm unsure of the reason behind it. I have already verified that Node.JS is installed on my system. npm ERR! notarge ...

How can I align the navigation bar in the center using Bootstrap?

Let's discuss the code snippet provided below. I am looking to use Bootstrap to center this dropdown menu on the left side of the screen. Here is the screenshot for reference: . Any suggestions on how I can achieve this? Also, I would like to know h ...

How to detect screen touches using NodeJS

I am currently working on a project using a single-board computer with a touchscreen. The program is designed to play videos and close them when the screen is touched, then perform another action. How can I detect when the screen has been touched? The op ...

HTML5 - Transforming your webpages into interactive flipbooks

Is there a way to achieve a page-turn effect when loading external HTML pages into a div? I am interested in utilizing CSS3, HTML5 or jQuery for this purpose. ...

My goal is to send distinct entries for each user that accesses the system from a MySQL database

As a beginner, I need help figuring out how to send each logged-in user a list of unique records from the database. I want to ensure that no duplicate records are sent to different users. How can I achieve this? Below is the code snippet responsible for ...

Making an npm request with specified headers and authorization

My current task involves accessing an API using the "request" npm package. The API requires a header called "content-type" and basic authentication. Here is the progress I have made so far: var request = require('request'); var options = { url ...

"Encountering an Invalid Grant Problem with Xero API Integration in NodeJS

I am currently developing an application for Xero using NodeJS and the xero-node module. Interestingly, all my requests for a refresh token are returning as "invalid grant" for some unknown reason. I even tried adjusting the code to immediately fetch the ...

Node.js Authentication with Bearer Tokens

I've been facing some issues with the request package in node as I'm not receiving the expected response. Despite following the documentation on npm and trying different configurations, I keep getting an error message saying "Invalid Access Token ...

Adding a new property to the Express request object type: what you need to know

Recently, I developed a custom middleware that executes specific logic tasks. It operates by transforming the keys to values and vice versa within the req.body. Both the keys and values are strings, with built-in validation measures in place for safety. T ...

I am experiencing issues with the functionality of the jQuery function

I am currently diving into the world of jquery. I put together a script, but unfortunately it's not functioning as expected. 1 Here is a snippet of my HTML code <ul id="recur" class="elasticstack"> <li id=<?=$item['id']?> ...

Currently in the process of refreshing a Drupal website with only access to a HostGator login

I've taken on a last-minute favor for a friend who needs a quick Valentine's Ad added to their existing website, which was built with Drupal in 2010 by someone they no longer have contact with. I don't have much experience with Drupal, but I ...

Tips on sending a variable to a function from a separate file with Node.js and Express

Hey there, I am currently working on uploading images. I have been following the documentation and everything seems to be working fine so far, but I want to add more dynamic functionality to a particular function. Firstly, here is my Controller: async fu ...

What could be causing my function to execute thrice?

I cannot seem to figure out why my tag cloud is causing the required function to run multiple times instead of just once when I click on a tag. This issue persists whether using jQuery or plain JavaScript. What am I missing? The code I have is very simple, ...

Creating a document in Mongoose and setting an Index

In my application's frontend, users can input their work experience in a small form and add more fields dynamically to include additional work experiences. If you're unsure of what I mean, check out this GIF. Before sending the form data to the ...

The partnership between Selenium and WhitePages has created an innovative solution

I am currently attempting to register on . The registration process requires entering my first name, last name, email address, and password. For the first name field, I attempted to locate the element by CSS using the syntax "input#name_fname", however, I ...

What is the process for changing the name of a key in a MongoDB response

I am reviewing the following code snippet: // retrieve a specific question app.get('/:id', (req, res) => { Question.findById(req.params.id, function(err, response){ if (err) { return res.status(404).send(); } ...

What is the best method for utilizing an autocomplete plugin to update a div element?

I am seeking assistance regarding implementing an autocomplete feature in a DIV that displays the names, images and ages of other users as they are typed into a field positioned above the DIV. I want this autocomplete functionality to mimic Facebook' ...

Having trouble establishing a connection between CapacitorJS and a local backend (Node.js) from an Android application

In the process of developing a web site using Vue.js + node.js (with MongoDB), the goal is to also create an app for Android and IOS. The work is currently being done on a local machine (localhost). By using Capacitor.js, the Vue.js code was converted to A ...