What is the best way to connect a CSS file to a jade document?

Having some trouble linking normalize.css while using socket and express.

html
        head
                title= "Real time web chat"
                link(href='/css/normalize.css')
                script(src='/chat.js')
                script(src='/socket.io/socket.io.js')
                script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js')
        body
                #content(style='width: 100%; height: 600px; margin: 0 0 20px 0; border: solid 1px 
#999; overflow-y: scroll;')
                .controls
                        | Name: 
                        input#name(style='width:350px;')

                        input#field(style='width:350px; display: inline; margin-left -90px;')
                        input#send(type='button', value='send')
cssnode.jsexpresspug

Answer №1

It is important to include the rel attribute.

link(href='/styles/main.css', rel='stylesheet')

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

Replace the typical bootstrap text class with stylish and modern google material icons

As a newcomer to the world of javascript, I acknowledge that my approach may not be ideal... I'm attempting to modify the color of a material icon upon clicking it. Essentially, I want to toggle it on and off. The challenge lies in the code's in ...

javascriptjquerycssgoogle-material-icons

Comparing res.status() and res.statusCode in Node.js

Is there any difference between these two approaches in expressjs? res.statusCode = 500; return res.json({ status: "error" }); or return res.status(500).json({ status: "error" }); ...

node.jsexpressresponsestatus

Is there a way to retrieve all data from a specific document in Firebase Firestore? Perhaps using a transaction?

Currently, I am working on a node project and have recently installed the Firebase package. The database structure that I am working with can be seen in the following image: https://i.stack.imgur.com/pSaG2.png I am looking to extract all data of a specifi ...

node.jsfirebasegoogle-cloud-firestorecollectionstransactions

The JestImportMeta interface is mistakenly extending the ImportMeta interface, causing an error

While transitioning from jest version 27 to v29, I encountered this issue: node_modules/@jest/environment/build/index.d.ts:329:26 - error TS2430: Interface 'JestImportMeta' improperly extends interface 'ImportMeta'. The types returned ...

node.jstypescriptjestjs

Tips for modifying the color of highlighted text?

Can you help me change the color of this text from blue to dark green by using Javascript or HTML/CSS? Please left-click and drag over the text to select it. ...

htmlcss

Tips for successfully mocking the 'sendMail' function of '@nestjs-modules/mailer' in a unit test

I have recently implemented code for sending emails using the '@nestjs-modules/mailer' package in my project. I am looking to create a unit test for this functionality by mocking the sendMail method provided by @nestjs-modules/mailer, so that I c ...

node.jsexpressmockingnestjsnodemailer

``Incorporate images into a slideshow container with proper alignment

I'm currently using a jquery slideshow on my homepage with fading images, but I'm having trouble centering them. The images are all different sizes and they're aligning to the left instead of being centered. Here is the CSS code I've b ...

csshtml

Personalizing the snippets selection background on Stack Overflow

I'm currently working on designing a custom dark theme for Stack Overflow using Stylish. Everything was going smoothly until I encountered an issue while customizing a particular snippet. I'm having trouble changing the selection color to somethi ...

cssselectioncode-snippets

Steps to reposition an element with absolute positioning to the upper left corner of the screen

I am currently in the process of creating a hamburger menu without using JavaScript, which should drop down from the top to the bottom when clicked. The burger menu is situated at the top right corner of the screen, but every time I try to drop down the na ...

htmlcsscss-positionabsolutehamburger-menu

Add an item to an array that contains objects within an array of other objects

How can I properly push the values "label" and "link" into an object within "data" based on the id match with the "parent" value of another object? The goal is to insert these values into the "children" property of the corresponding target object, but it d ...

javascriptnode.js

To ascertain whether the mouse is still lingering over the menu

I have a condensed menu construction that unfortunately cannot be changed in HTML, only CSS and JS modifications are possible! $('span').on("hover", handleHover('span')); function handleHover(e) { $(e).on({ mouse ...

javascriptjqueryhtmlcss

Struggling to adjust the width of a DIV based on browser size and content with CSS

I'm working with a div that contains several 210x210 pixel images, and I want to adjust its margin from the left side. The goal is for the right side of the div to be just a few pixels away from the images, which will have their own margin set. Strang ...

htmlcss

An issue has occurred: [ERR_REQUIRE_ESM] You must utilize the import statement in order to load an

These are the snippets of code I'm working with: index.ts import { MikroORM } from "@mikro-orm/core" import { __prod__ } from "./constants"; import { Post } from "./entities/Post"; import microConfig from "./mikro-o ...

node.jsreactjstypescriptpostgresql

Getting conflicting outcomes from the karma e2e test runner. Any tips on how to troubleshoot?

I've been working on a project that combines Angular, RequireJS, and Node, and everything looks good in the browser. However, I'm facing some issues while setting up e2e tests with Karma. I tried to replicate the e2e configurations and directory ...

node.jsangularjsrequirejskarma-runner

Retrieve specific data from a subdocument in Mongoose using a query with filtering capabilities

I'm facing an issue where I want to extract a specific subdocument from a parent document based on a certain field value, but my current query is returning all subdocuments instead of just the one I need. I am trying to filter by the candidateId field ...

node.jsexpressmongoosemongodb-query

Problems with WordPress Theme Rendering in Outdated Versions of Internet Explorer

Currently, I am developing a website for Chase on the Lake at http://chaseonthelake.com/. While everything looks perfect in FireFox, there are some display issues when viewing it in Internet Explorer. The dropdown transparency is not showing correctly, m ...

javascripthtmlcsswordpresswordpress-theming

What are the potential drawbacks of utilizing <div> spacers in web design?

Is it considered poor practice to utilize <div> elements as a means of creating space between other elements? If so, what are the reasons behind this? For instance: <div class="panel"> <!-- Content --> </div> <div class="s ...

htmlcss

Achieve a perfect balance with Flex by centering items using justify-content and align

Seeking assistance, please. Utilizing Bootstrap 5 and attempting to achieve this specific layout alignment: https://i.sstatic.net/zVP7T.png <html class="h-100" lang="en"> <head> <!-- Required meta tags --> <meta charse ...

csstwitter-bootstrapflexboxalignmentbootstrap-5

Tips on managing errors in a router with the help of middleware

Currently, I am utilizing node and express to create a server. However, there seems to be an issue where errors that occur within a router are not being properly handled, causing the entire server to crash: In my Server.js file: import SubRouter from &apo ...

javascriptnode.jsexpress

Create concise information in a single line with Twig

So, I basically need to display the following information inline on my website: Just like this: Family: Open Sans - Variant: Regular Italic Size: 15px - Line Height: 25px - Paragraph: 15px Color: grey_3 This is the code snippet: {% include "../compone ...

htmlcsstwig