0

(Beginner here...)

My CSS won't link to my HTML. I am using GOORM IDE, I have read other questions on this topic and tried the solutions from them but none seem to work (when I apply the CSS inline, it works perfectly), I have so far tried:

  • Moving the main.css to the same folder as the header.ejs file
  • Adding type="text/css"
  • Changing the href to:

main.css

/main.css

/stylesheets/main.css

/public/stylesheets/main.css

../stylesheets/main.css

None of which have worked. Any ideas? I want to keep the CSS in a separate folder if possible. I have included a screenshot of the file structure on GOORM also if that is useful.

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="main.css">

enter image description here

caramba
  • 21,963
  • 19
  • 86
  • 127
MikeH
  • 23
  • 3
  • 1
    Welcome to SO! `Beginner here` we don't need to know that, a good question has nothing to do with one being a beginner. That being said, this looks like a duplicate. – Alexandre Elshobokshy Aug 20 '20 at 13:14
  • 1
    i never heard of this ide. – ino Aug 20 '20 at 13:16
  • _“I am using GOORM IDE”_ - not sure what that is; but assuming you still test the result in an normal browser, check what the browser console has to say. – CBroe Aug 20 '20 at 13:18
  • What does your `main.css` actually contain, did you make sure it is _just_ the CSS? (A “popular” beginner’s mistake when moving inline styles to an external stylesheet, is to copy&paste the ` – CBroe Aug 20 '20 at 13:21
  • @djangotic https://ide.goorm.io/ – Martin Aug 20 '20 at 13:26
  • we need your config, how you build your ejs files? Your header.ejs inside 2 lvl folders, so you need ../../public/stylesheets/main.css – Nugzar Gaguliya Aug 20 '20 at 13:27
  • You know Goorm has a big Reddit help section linked from their website. As well as an extensive (but possibly rubbish) documentation. Have you tried these places for help? The things you've tried would / should work on a simple (ie non-goorm) set up – Martin Aug 20 '20 at 13:32
  • Assuming `public` is your HTML base folder; your CSS reference in a usual developement should be: ``. As this doesn't work due to how Coorm compiles, I would recommend exploring the [Goorm help forum](https://www.reddit.com/r/goormIDE/) – Martin Aug 20 '20 at 13:33
  • 1
    @IslamElshobokshy thanks, the link you shared: "Can't get stylesheet to work with ejs for node.js" solved this perfectly! – MikeH Aug 20 '20 at 14:22

3 Answers3

2

mmm I'm not sure really but I think your path based on the image should be

    <link rel="stylesheet" href="stylesheets/main.css">
Ahmad Dalao
  • 1,968
  • 1
  • 8
  • 14
0

Yes, I also think, there should be the path to the .css-File.

for example, I called my css in the head like this:

<link rel="stylesheet" href="app/css/app.css" />

So you need to call your file:

<link rel="stylesheet" href="public/stylesheets/main.css" />

Btw: is the link to the fonts correct? Is this a valid repository?

Phil
  • 9
  • 2
0

Tested in VSCode, this works for me:

You've got your header.ejs in views/partials and your main.css in public/stylesheets.

This means your link has to move up two directories. Use:

<link rel="stylesheet" href="../../public/stylesheets/main.css>
Dharman
  • 30,962
  • 25
  • 85
  • 135
Jake Black
  • 1
  • 4