HTML file not loading CSS

Question

enter image description hereBelow my code runs fine, but when I preview the html file in browser, none of the styling shows up. When I inspect the element in Chrome dev tools, it shows that it is still trying to just access "style.css" instead of the path I wrote in. I cleared browser cache, I closed and reopened the page, refreshed it, saved the file and closed IDE, etc. What am I doing wrong?

body {
    background: -webkit-linear-gradient(-45deg,#FFFED4,#FFEEFF)

}

h1, p, h3{
    font-family: Arial;
    color: black;


}
h1 {
    font-size: 60px;
    text-align: center;


}

p {
    font-size: 25px;
    text-align: center;

}
img {
    display: block;
    margin-left:auto;
    margin-right: auto;
    width: 50%;

}
h3 {
    font-size: 25px;
    font-family: Helvetica;
    position: relative;
    bottom: 0px;
}

<!DOCTYPE html>
<html>

    <head>
        <title>We Apologize</title>
        <link rel="stylesheet" type="text/css" href="./resources/css/style.css">
        <link rel="icon" type="image/gif/png" href="./resources/img/Brighton-McFarlane13.png">
    </head>

    <body>
        <main>
            <h1>We apologize</h1>
            <p>The site is under construction right now, but we are doing our best to bring it to life! Check back in a few weeks to see the final product!</p>
            <img src="https://i.imgur.com/YjMR0E6.jpg">
        </main>
        <article>
            <p>Soon this site will be a portfolio, shop, and forum for the <a href="https://www.youtube.com/channel/UCLxxUr3dwkzNkIUvFv84k4w/" target="_blank">Brighton McFarlane YouTube Channel!</a></p>
            <img src=./resources/img/Brighton-McFarlane12.png>
            <h3>Thanks for stopping by!</h3>
        </article>
    </body>

<html>

Check the path to the file. Or check the console for any errors. — Ashik Paul, Jun 09 '20 at 15:03
The hyperlink is my screenshot of the files. Sorry I wasn't sure how images work on here — bmcfarlane, Jun 09 '20 at 15:10

score 2 · Answer 1 · answered Jun 09 '20 at 15:04

2

sounds like an issue with your relative path. I cannot see how your file directory is set up but try href="resources/css/style.css"

if it still doesn't work you need to move up a folder. href="../resources/css/style.css"

hope this helps!

answered Jun 09 '20 at 15:04

Jon dreisbach

206
1
3
14

We Apologize – bmcfarlane Jun 09 '20 at 15:06
Thats how it shows up in Chrome, completely removes my path that I put in. – bmcfarlane Jun 09 '20 at 15:07
if its showing without `./resources/css/` then this is not the same file that you are editing vs viewing... double check. – Seabizkit Jun 09 '20 at 15:11
1

is the page your loading in the same folder as the css file? what does your directory look like? – Jon dreisbach Jun 09 '20 at 15:15

GJKH · Answer 2 · 2020-07-13T15:55:10.300

1

If the resources folder is in the root of your site/folder structure, remove the . before the slash.

<link rel="stylesheet" type="text/css" href="/resources/css/style.css">

What does "./" (dot slash) refer to in terms of an HTML file path location?

/ means the root of the site;

./ means the current directory;

../ means the parent of the current directory.

edited Jul 13 '20 at 15:55

answered Jun 09 '20 at 15:12

GJKH

1,715
13
30

score 1 · Answer 3 · answered Jun 09 '20 at 15:14

1

Well turns out I'm an idiot and updated the file path of the html file and Atom didn't automatically update where the file was located, it created some sort of imaginary copy of it. I saved the file to the proper folder and it is working now.

answered Jun 09 '20 at 15:14

bmcfarlane

11
2

1

Thank you all for your help! – bmcfarlane Jun 09 '20 at 15:14

HTML file not loading CSS

3 Answers3