CSS not linking with HTML locally but works in Github Pages

Question

I have been working on a portfolio as a beginner Web Dev project, however, I have come across a problem with linking my CSS.

The page shows as instructed on GitHub pages but when ran locally on any browser, with cache emptied or nor, it simply does not show up.

Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
        <link href='styles.css' rel='stylesheet' type='text/css' />
        <title>Mohsen Bakhit</title>
        <script src="script.js" ></script>
    </head>
    <body>
        <div class='header'>
            <h1>Mohsen Bakhit</h1>
            <h2>Developer For Hire</h2>
            
        </div>
    </body>
</html>

And the CSS file:

html {
    font-family: 'Montserrat', 'Open Sans', monospace;
    font-size: 16px;
}

.header {
    position: relative;
    text-align: center;
    color: black;
    background-image: url('/resources/vancouver.jpg');
}

.header h1{
    color: white;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
    
}

.header h2{
    font-size: 1.25rem;
    color: white;
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
}

To be clear, none of the effects show up, not even the fonts. The files are in the same folder and that is why there is no relative path to the link element. Would really appreciate the help.

is your script working? – Prosy Arceno May 07 '21 at 21:17 — Prosy Arceno, May 07 '21 at 21:17

score 0 · Answer 1 · answered May 07 '21 at 20:34

0

You are missing the relative path to the file. Basically you have to do

<link href='./styles.css' rel='stylesheet' type='text/css' />
 <script src="./script.js" ></script>

Instead of

<link href='styles.css' rel='stylesheet' type='text/css' />
<script src="script.js" ></script>

I am assuming that you have script.js Style.css and Index.html all in one folder

answered May 07 '21 at 20:34

Nishant S Vispute

713
1
7
21

Yes, they are in the same path, however, using relative paths does not help. – TheSimpathizer May 08 '21 at 16:25
can you paste the code of entier HTML file – Nishant S Vispute May 08 '21 at 16:33
This is it for now. As soon as this problem occurred I tried fixing it before going any further. My js file is also empty at the moment. – TheSimpathizer May 08 '21 at 23:08
Ensure that the Script.js and Style.css do not have upperCase **S** in them.. in that case you can just update the file names in your html or change the uppercase to lowercase the file names should be "style.css" and "script.js and Not "Script.js or "Styles.css" – Nishant S Vispute May 08 '21 at 23:23

score 0 · Answer 2 · answered May 07 '21 at 20:52

Here are a few steps to solve your problem:
First of all, Check if the css file name is the same with the name you have written in href. Your css file's name should be the same with which you have written in your code in href="styles.css". Means your css file should be named styles.
Secondly, if your css file is in the same folder where your html file is; it should work. That means your css file is in another folder(not in the folder where html file is).
If your css file is in another folder, Follow these steps:
Condition 1: With your html file, there is a folder named e.g."CssStyles" where your css file is. Now, change some code in html:

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

Condition 2: There is a folder with html file named e.g."CssStyles", in that folder there is another folder named e.g."css", in that folder is your css file. Now< do this:

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

score 0 · Accepted Answer · answered May 09 '21 at 16:27

0

The issue funnily came from me naming my file "styles.css". As soon as I changed that to style.css and change the relative URL, the issue got fixed and everything started working fine.

answered May 09 '21 at 16:27

TheSimpathizer

31
6

score 0 · Answer 4 · answered May 17 '21 at 10:20

The problem is with your URL link it should be like your folder name.

for example my folder name is CSS and I had in my URL link as which was not working after double checking I found that my css is not capitalized so I change it to and now it works correctly with all styles.

CSS not linking with HTML locally but works in Github Pages

4 Answers4