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
– Ashik Paul, Commented Jun 9, 2020 at 15:03
The hyperlink is my screenshot of the files. Sorry I wasn't sure how images work on here — bmcfarlane
– bmcfarlane, Commented Jun 9, 2020 at 15:10

Jon dreisbach · Accepted Answer · 2020-06-09 15:04:05Z

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 9, 2020 at 15:04

Jon dreisbach

2061 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bmcfarlane Over a year ago

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

bmcfarlane Over a year ago

Thats how it shows up in Chrome, completely removes my path that I put in.

Seabizkit Over a year ago

if its showing without ./resources/css/ then this is not the same file that you are editing vs viewing... double check.

Jon dreisbach Over a year ago

is the page your loading in the same folder as the css file? what does your directory look like?

bmcfarlane · Accepted Answer · 2020-06-09 15:14:18Z

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 9, 2020 at 15:14

bmcfarlane

112 bronze badges

1 Comment

bmcfarlane Over a year ago

Thank you all for your help!

GJKH · Accepted Answer · 2020-07-13 15:55:10Z

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, 2020 at 15:55

answered Jun 9, 2020 at 15:12

GJKH

1,73513 silver badges33 bronze badges

Collectives™ on Stack Overflow

HTML file not loading CSS

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related