Why does my stylesheet no longer work after I go to another HTML page?

Question

first html file (index.html)

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <header>What every country was equipped with in WW2</header>
    
    <p class="Country"> AMERICA </p>
    <div id="US_Soldier">
      
     <div> 
       <p> During ww2, american soldiers were provided with some personal belongings and basic rations along with their main equipment. Their ammunition belt held 8 clips of ammunition. They also had a first aid pouch, a bayonet, a canteen, and some other tools. Spades, a basic helmet, and a raincoat/tent pack. The standard gun was an m1 garand. 
       </p> 
      </div>
      <div> 
        <img class = "images" style="width:150px" src="americansoldier.jpg"> 
      </div>
    </div>
    <br>
    <div id = "US_Branches">
      <div>
        <p> Along with their actual soldier equipment, America had different branches for different parts of war. Mainly, this was divided into the army, the marines, and the navy to name a few.
        </p> 
      </div>
      <div>
        <img style="width:150px" src="americanfighterjet.jpeg">
      </div>
    </div>
    
    <div id = "US_Tanks">
      <div>
        <p>
          One of the main tanks was the m4 sherman. Its armour thickness had a maximum of 75 mm and a minimum of 12 mm. It weighed about 60,000 pounds, had a max speed of 30 mph, and had a range of 120 miles. 
        </p>
      </div>
      <div>
        <img style="width: 150px" src="americantank.jpg">
      </div>
    </div>
    
    <div id = "navbar">
      <ul>
        <li><a class = "nav" href="index.html">America</a></li>
        <li><a class = "nav" href="germany.html">Germany</a></li>
        <li><a class = "nav" href="#">Japan</a></li>
      </ul>
    </div>
  </body>
</html>

second html file (germany.html)

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <header>What every country was equipped with in WW2</header>
    
    <p class="Country"> AMERICA </p>
    <div id="US_Soldier">
      
     <div> 
       <p> During ww2, american soldiers were provided with some personal belongings and basic rations along with their main equipment. Their ammunition belt held 8 clips of ammunition. They also had a first aid pouch, a bayonet, a canteen, and some other tools. Spades, a basic helmet, and a raincoat/tent pack. The standard gun was an m1 garand. 
       </p> 
      </div>
      <div> 
        <img class = "images" style="width:150px" src="americansoldier.jpg"> 
      </div>
    </div>
    <br>
    <div id = "US_Branches">
      <div>
        <p> Along with their actual soldier equipment, America had different branches for different parts of war. Mainly, this was divided into the army, the marines, and the navy to name a few.
        </p> 
      </div>
      <div>
        <img style="width:150px" src="americanfighterjet.jpeg">
      </div>
    </div>
    
    <div id = "US_Tanks">
      <div>
        <p>
          One of the main tanks was the m4 sherman. Its armour thickness had a maximum of 75 mm and a minimum of 12 mm. It weighed about 60,000 pounds, had a max speed of 30 mph, and had a range of 120 miles. 
        </p>
      </div>
      <div>
        <img style="width: 150px" src="americantank.jpg">
      </div>
    </div>
    
    <div id = "navbar">
      <ul>
        <li><a class = "nav" href="index.html">America</a></li>
        <li><a class = "nav" href="germany.html">Germany</a></li>
        <li><a class = "nav" href="#">Japan</a></li>
      </ul>
    </div>
  </body>
</html>

style sheet

@font-face {
  font-family: Warpaint;
  src: url('Warpaint.ttf');
}

body {
  background-image:linear-gradient(#181a19,#272b29);
}
p {
  color: #98a39d;
  font-family: Warpaint;
}
h3 {
  font-family: Warpaint;
  font-size: 30px;
}

header {
  font-size: 35px;
  font-family: Warpaint;
  color:#98a39d;
  text-align: center;
  margin: 0 auto;
}

.Country {
  text-align: center;
  font-size: 50px;
  margin: 0 auto;
}

#US_Soldier {
  margin: 0 auto;
  display: flex;
  width: 450px;
  border-radius: 25px;
}

#US_Soldier > div {
  margin: 10px;
}

#US_Branches {
  margin: 0 auto;
  display: flex;
  width: 450px;
}

#US_Branches > div {
  margin: 10px;
}

#US_Tanks {
  margin: 0 auto;
  display: flex;
  width: 450px;
}

#US_Tanks > div {
  margin: 10px;
}

#navbar {
  text-align: center;
}

#navbar > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navbar > ul > li {
  display: inline-block;
  margin-left: 60px;
  padding-top: 25px;
}

#navbar > ul > li > a {
  font-family: Warpaint;
  font-size: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.nav {
  font-size: 72px;
  color: #98a39d;
}

.nav:hover {
  color: #6b736e;
}

The issue is that the stylesheet works on first try, but then when I click on one of the href buttons, it removes the styling for it. The actual linking works because when i click on the germany button, it takes me to the page with "germany" on it.

Does this answer your question? [Having links relative to root?](https://stackoverflow.com/questions/5559578/having-links-relative-to-root) — WOUNDEDStevenJones, Feb 17 '22 at 19:39
If you use your browser's Developer Tools you'll be able to inspect the CSS file that it's trying to load (specifically, you'll be able to see the URL that it's trying to load from). I suspect the issue is that it's trying to load the CSS relative to the current file (`href="style.css"`) rather than using a root-relative path like `href="/style.css"`. — WOUNDEDStevenJones, Feb 17 '22 at 19:41
Can you confirm what the URL of the CSS file URL is being loaded from on the working page? And then compare that to URL of the CSS file on a page that isn't working? Are those the same URLs? — WOUNDEDStevenJones, Feb 17 '22 at 20:34
Could you add some screenshots of the pages to your question? Also some screenshots of the network tab with the CSS file selected so we can see the HTTP response code and/or the contents of the loaded CSS file? — WOUNDEDStevenJones, Feb 17 '22 at 21:45
i'm on a school chrome so i dont think it will let me. I'm using p5js, and nothing on there is different then the information you're getting here. I can share the edit link if you want.https://editor.p5js.org/milan.chandran/sketches/RuD5XQ31w — obama, Feb 18 '22 at 14:27
That sounds like a specific issue to p5js. You'll have better luck joining their Discord and asking the community there, or running this locally on your computer instead of in a code editor online. — WOUNDEDStevenJones, Feb 18 '22 at 14:58
editor.p5js.org is surprisingly dysfunctional when it comes to hosting multiple HTML pages. I suggest you use https://glitch.com/ or https://replit.com/ for this kind of thing. — Paul Wheeler, Feb 19 '22 at 03:33

score 0 · Answer 1 · answered Feb 19 '22 at 03:48

The issue here is that editor.p5js.org is responding with the wrong Content-Type for CSS and JavaScript files. Here's an example from one of my own sketches:

Request:

GET /Kumu-Paul/sketches/lpPqyaGXy/style.css h3
:method: GET
:authority: preview.p5js.org
:scheme: https
:path: /Kumu-Paul/sketches/lpPqyaGXy/style.css
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.87 Safari/537.36
accept: text/css,*/*;q=0.1
sec-gpc: 1
sec-fetch-site: same-origin
sec-fetch-mode: no-cors
sec-fetch-dest: style
referer: https://preview.p5js.org/Kumu-Paul/sketches/lpPqyaGXy/alternate.html
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9

Response:

h3 200 
date: Sat, 19 Feb 2022 03:34:43 GMT
content-type: text/html; charset=utf-8
x-powered-by: Express
vary: Origin, Accept-Encoding
access-control-allow-credentials: true
via: 1.1 google
cache-control: max-age=14400
cf-cache-status: MISS
server: cloudflare
cf-ray: 6dfc70eb49a9312e-LAX
content-encoding: br
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400

html, body {
  margin: 0;
  padding: 0;
  background-color: dodgerblue;
}

h1, h2, h3, h4, h5 {
  font-family: monospace;
}

There is an open bug on GitHub covering this: https://github.com/processing/p5.js-web-editor/issues/1486 — Paul Wheeler, Feb 19 '22 at 03:51

Why does my stylesheet no longer work after I go to another HTML page?

1 Answers1