CSS isn't importing into my HTML file

HTML & CSS
1

I have an HTML file (called index.html, which contains an <iframe> element that displays another HTML file (called home.html). I’m trying to style the fonts on both pages with a file (/styling/style.css). Here is the content of the files:
index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
    <p>Testing header...</p>

    <style type="text/css">
      body, html
      {
          margin: 0; padding: 0; height: 100%; overflow: hidden;
      }

      #content
      {
          position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
      }
    </style>

    <link href="/styling/style.css"/>
  </head>

  <body>
      <iframe width="100%" height="100%" src="home.html"></iframe>
  </body>
</html>

home.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>

    <link href="/styling/style.css"/>
  </head>

  <body>
    <fluent-button>Wow!</fluent-button>

    <fluent-card>
      <h1>What is Formal Software?</h1>
    </fluent-card>
    <fluent-card>
      <fluent-card>
        <img src="https://formalsoftware.great-site.net/assets/texTypeLogo.png"/>
      </fluent-card>
    </fluent-card>
  </body>
</html>

/styling/style.css:

html {
    background-color: black;
}

h1 {
    font-family: 'Segoe UI';
    font-size: 36px;
    font-weight: bold;
    color: blue;
}

But I see the wrong fonts and no black background:

image
image1859×321 10.4 KB

What am I doing wrong here?

2

The href="/styling/style.css" path will only work if style.css is in a folder called /styling/ in your root folder. Is that the case?

The path will also only work if your files are within a server environment, rather than on your local computer.

2 Likes
4

I wasn’t on a server environment, as mentioned by @ralphm, so I changed my link statement like this:

<link rel="stylesheet" href="styling/style.css">
1 Like
5

A server environment would include hosting the website locally using a server such as Apache or Nginx, right?

1 Like
6

Yes, sure. Because I’m wobbly with that stuff, I use things like MAMP, which set up the whole environment for you, including Apache and PHP, but even things like Docker work nicely too.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.