Home
Support Forums

My website isnt rendering any css in some of the files and css file

https://adoring-jackson-d18c34.netlify.app/

So when i deploy my website it doesn’t render any css. Like the style.css and in other files have css in it. And my github has the css and other css in other files in the repo. But it still doesn’t Render.

Hi @Mamancoder56

Welcome to the forums :netliconfetti:

The homepage had a linked stylesheet in the head

<link rel="stylesheet" href="style.css">

however in the Developer Console I see 404 Not Found. (The homepage also has the <title> tag twice.)

The About Us and Blog pages both have inline <style> tags so some styling is rendered,though neither have have reference to thestyle.css` the homepage does.

The Resources page has neither a linked stylesheet nor inline styles.

I suggest downloading the latest deploy to check all files are deployed and are in the correct location. Go to https://app.netlify.com/sites/adoring-jackson-d18c34/deploys click the latest deploy and click the download icon

If you have any more questions or issues, do not hesitate to reply. If you can share a link to your git repository, this will assist in troubleshooting.

Hi, I am Mamancoder56 i did and it had all the files
So basically i have to wirte the line <link rel="stylesheet href="style.css>
in the files of about us and Blog and the resource page has to have in line styles and a linked style sheet refering to style.css. Right or Wrong?


cause im not quite getting it on what you mean’t it will be good if you could use an example reffering with the code.

The file in the screenshot provided is styles.css, not style.css so you need

<link rel="stylesheet href="styles.css">

between the <head> and </head> tags of each page you want the stylesheet loaded on.

But when i did it didn’t work
code for about us page:

<!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>About Us</title>
    <link rel="stylesheet" href="styles.css">
</head>
<html>

<body>
    <div class="card">
    <h1>Our Team And Other Information</h1>
    <p>Our Team Consists of 3 People. We are here to boost your productivity for the better.
        We hope to Make our Users Happy and Greaful that they chose Resource Room.
            We will make sure our users are satisified. Just Note we will make sure that we wont dissapoint you!
        Our Team Will take the Responsibilty if you aren't satisified with us and we will act uponst your feedback.
    -By Your Founder/Owner/Developer</p>
</div>
</div>
</body>
<style>
    h1 {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
    }

    p {
        font-family: monospace;
    }

    .card {
        background: white;
        padding: 1rem;
        border: 1px solid grey;
        border-radius: .25rem;
        background: grey;
    }
</style>
</html>`
the code for blog page:`<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="styles.css">
    <title>Blog</title>
</head>
<body>
    <style>
        *, *::before, ::after {
            font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
        }


        .card{
            background: white;
            padding: 1rem;
            border: 1px solid grey;
            border-radius: .25rem;
            max-width: 600px;
        }

        .card.card-shadow{
            border: none;
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
        }

        .card-header {
            font-size: 1.5rem;
            margin-bottom: .5rem;
        }

        .card-body {
            font-size: .9rem;
        }

        .card-footer{
            margin-top: 1rem;
        }

        .btn {
            background: hsl(200, 50%, 50%);
            color: white;
            border: none;
            font-size: 1rem;
            padding: .5em .75em;
            border-radius: .25em;
            cursor: pointer;
        }
    </style>
</body>
<div class="card-grid"></div>
<div class="card">
    <div class="card-body"></div>
    <div class="card-header">Update 0.1 New Version</div>
    Update 0.1(New Resource Room)
    <p>-New Website Design</p>
    <p>-New Features</p>
    <p>-New Mechanics</p>
     <p>Comments: Welcome to the New Version of Resource Room there has been 
         a lot of work going onto this. I did a new remodel of the website because 
         the old one didn't look good.
<div class="card-footer">
    <button class="btn">Details</button>
</div>
</div>
<div class="card card-shadow">
    <div class="card-body"></div>
    <div class="card-header">Update 0.1 New Version</div>
    Resource Room Q.A
    <p>Q1.Is a New Resource Room Going to come out</p>
    <p>A1.Yes, We have considered of working on a new Thing which is called Resource Room elite which is where you can find RECOMMENDED RESOURCES.</p>
    <p>Q2.Whats Next for Resource Room</p>
    <p>A2. Work On Resource Room Elite.</p>
    <p>Q3. How Many Resources Do you think will be in Resource Room</p>
    <p>A3. Not many but like around 30-40+. Its going to take a long time so probably only a bit though, a bit after Realese you will be finding more Resources.</p>
<div class="card-footer">
    <button class="btn">Details</button>
</div>
</div>
</div>
</html><!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="styles.css">
    <title>Blog</title>
</head>
<body>
    <style>
        *, *::before, ::after {
            font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
        }


        .card{
            background: white;
            padding: 1rem;
            border: 1px solid grey;
            border-radius: .25rem;
            max-width: 600px;
        }

        .card.card-shadow{
            border: none;
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
        }

        .card-header {
            font-size: 1.5rem;
            margin-bottom: .5rem;
        }

        .card-body {
            font-size: .9rem;
        }

        .card-footer{
            margin-top: 1rem;
        }

        .btn {
            background: hsl(200, 50%, 50%);
            color: white;
            border: none;
            font-size: 1rem;
            padding: .5em .75em;
            border-radius: .25em;
            cursor: pointer;
        }
    </style>
</body>
<div class="card-grid"></div>
<div class="card">
    <div class="card-body"></div>
    <div class="card-header">Update 0.1 New Version</div>
    Update 0.1(New Resource Room)
    <p>-New Website Design</p>
    <p>-New Features</p>
    <p>-New Mechanics</p>
     <p>Comments: Welcome to the New Version of Resource Room there has been 
         a lot of work going onto this. I did a new remodel of the website because 
         the old one didn't look good.
<div class="card-footer">
    <button class="btn">Details</button>
</div>
</div>
<div class="card card-shadow">
    <div class="card-body"></div>
    <div class="card-header">Update 0.1 New Version</div>
    Resource Room Q.A
    <p>Q1.Is a New Resource Room Going to come out</p>
    <p>A1.Yes, We have considered of working on a new Thing which is called Resource Room elite which is where you can find RECOMMENDED RESOURCES.</p>
    <p>Q2.Whats Next for Resource Room</p>
    <p>A2. Work On Resource Room Elite.</p>
    <p>Q3. How Many Resources Do you think will be in Resource Room</p>
    <p>A3. Not many but like around 30-40+. Its going to take a long time so probably only a bit though, a bit after Realese you will be finding more Resources.</p>
<div class="card-footer">
    <button class="btn">Details</button>
</div>
</div>
</div>
</html>

The about us page currently online (https://adoring-jackson-d18c34.netlify.app/about%20us.html) does not contain a link to the stylesheet in the head.

<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>About Us</title>
</head>

https://wonderful-hodgkin-5f9e64.netlify.app/ is the new link its still the same situation. Buti found something interesting the styles.css page is empty


and when i checked the blog page and about us page they worked!
couldn’t put img only one media sorry
blog page

about us page
couldn’t put more than one img but it worked like i said

so it seems like something is wrong
and notice that the file style.css is not styles.css it might be that

i think you haven’t add any css in your website as other members also told this.

As mentioned in a previous post, the filename is styles.css and not style.css. So yes, the reason the About Us page works is because

<link rel="stylesheet" href="styles.css">

is in the <head> while the home page does not work because

<link rel="stylesheet" href="style.css">

is in the <head> which references a non-existent file.

As pointed out previously you need to put

<link rel="stylesheet" href="styles.css">

in the <head> of each page you want the stylesheet applied to.