CSS styling not showing in browser (Chrome)-CodePudding

Fairly new to HTML/CSS and was doing a follow along project. My CSS styling doesn't carry over to Chrome when I want to see what I have so far. I can drop my code below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gritt-ify</title>
    <link rel="stylesheet" type="text/css" href="./resources/css/stylesheet.css">
</head>

<body>
    <!-- Banner section -->
    <div >
        <h1>Gritty's landing banner</h1>
        <img id="grimage" src ="./resources/images/gritty img.jpg" alt="">
        <p>Cause everything's better with Gritty's face on it</p>
        <button> Subscribe to Gritty</button>  
    </div>

    <!-- Gritter section-->
    <div>
        <span>Gritter</span>
        <p>Social media dedicated to Gritty and only Gritty</p> 
        <form action="">
            <input type="text"/>
            <input type="submit" value="Submit"/>
        </form>
    </div>

    <div>
        <ul>
            <li>
                <div></div><span>Hey there, it's Gritty again.</span>
            </li>
            <li>
                <div></div><span>Hey there, it's Gritty again.</span>
            </li>
            <li>
                <div></div><span>Hey there, it's Gritty again.</span>
            </li>
        </ul>
    </div>
</body>
</html>

And here's my minimal CSS so far:

.banner {
    background-color: #4D00FF;
    color: white;
    margin-top: 75px;
    text-align: center;
}

#grimage {
    height: 50px;
    width: 50px;
}

If I made a fairly stupid mistake, feel free to shout it out. Thanks.

EDIT: The problem's been resolved. Thanks to everyone who contributed!

CodePudding user response：

You need to remove the . prefix from your links, this applies to your head section and the image you are using.

Replace

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

With

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

CodePudding user response：

You have one folder per se. In this example, let's just call it "Christian INDEX". Inside that folder, you have your index.html and a folder called "styles" like so:

Now, inside the styles folder, you have your "stylesheet.css". The browser has to grab the CSS from one folder back from the current (index.html) to grab the style sheet in the styles folder. Now because it only has to go back once you can use .styles/stylesheet.css

If you had a folder called index and had the index.html inside that folder then you would use two ..

File structure that works:

~Christian INDEX (parent ~ main folder)
 -styles (folder) 
       ~ stylesheet.css [file]
 -index.html [file]