CSS not being applied in pages :/

[noethix]

Hello eveyone,

I am new to github. I’ve been following tutoials etc on how to set up pages. Now, i’m trying to move my codepen HTML and CSS over here. HTML is working, but CSS is not being applied. 

I’m obviously doing something wrong. But I can’t figure it out.

https://github.com/noethix/trial

Thank you in advance fo any pointers.

Cecile

[SethClydesdale]

Hi @noethix,

Looking at your page, it appears the issue is the “/” at the beginning of your stylesheet’s source. Change “/css/main.css” to “css/main.css” (on line 5 of index.html) and it should fix the issue you’re having.

For future reference, if the html file is in the same directory as another folder or file, you don’t need to include a slash at the beginning of the src or href attributes. Also, if you need to access files up one, two, or however many directories, you can use two periods as a substitute. (example below)

say our folders are…

root --> resources --> stylesheet.css

root --> lessons --> lesson-1 --> exercise-1 --> index.html

For our html file to access the stylesheet we could provide the following.

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

Basically two “…” moves up a directory and since index.html was three directories down, we moved up three times until we were in the root thus able to access the resources folder. You can also reference the current directory with “./”.

If any questions, let us know.

[beffyd]

THANKYOU

[ShivamQmr]

https://github.com/Shivam2080/rajuks

Why my CSS is not working properly?
I have tried it through live server, Its alright but after committing and the server is live there is a design that I have uploader previously.

[pro-hacker18]

thank you it was a big proplem for me

[noethix]

Thank you @sethclydesdale for your detailed answer and the tips ! But it didn’t work either…

[lee-dohm]

CSS appears to be working when I look at https://noethix.github.io/trial. Do you see it as working now? Or can you describe what is not working for you?

[dShap3]

Thank you, that helped me so much; not only for CSS but also for IMAGE directories (I used to work with underline before its names, like: “_css or _image”).

So, I had to took them off and changed on HTML and CSS as well so it could work.

[Fathima-Syeda]

Hello, I am facing the same issue. Did you happen to find a fix for it?

@noethix wrote:

Thank you @sethclydesdale for your detailed answer and the tips ! But it didn’t work either…

[SeemSach]

Hi,

I tried few things which worked for me. I assume those are not major reasons; but still you can try

1. Remove the css folder and keep your index file and css at same place, and remove the hierarchy in link attribute as href=“main.css”. 

2. Add in head tag

        <meta charset=“UTF-8”>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
and then <link rel=“stylesheet” type=“text/css” href=“main.css”>
and then <title> </title>
try shuffling the order.

It worked then; I reshuffled the order to check if that is the reason; it is working since then for no absolute reason for shuffling the order.

And I am assuming each time you commit the change; in settings under GitHub Pages Section revisit the master brance in source option and then publish. 

[muhammed-py]

thank you, it worked for me, i only had to add the type="text/css"

[Jean-Laurore]

Thanks that work for me

[SeemSach]

Hi,

I tried few things which worked for me. I assume those are not major reasons; but still you can try

1. Remove the css folder and keep your index file and css at same place, and remove the hierarchy in link attribute as href=“main.css”. 

2. Add in head tag

        <meta charset=“UTF-8”>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
and then <link rel=“stylesheet” type=“text/css” href=“main.css”>
and then <title> </title>
try shuffling the order.

It worked then; I reshuffled the order to check if that is the reason; it is working since then for no absolute reason for shuffling the order.

And I am assuming each time you commit the change; in settings under GitHub Pages Section revisit the master brance in source option and then publish. 

[MangbawiTawmbing]

Can you help me with mine? 

https://github.com/MangbawiTawmbing/ludo

[tmetz]

Hello @noethix,

Thanks for bringing up this topic, as this is a very common issue we see! First of all, it does appear that after making the change suggested by @SethClydesdale your CSS did start working, and https://noethix.github.io/trial/ looks great! Sometimes it can take a minute for updates to show up, or an old version is cached by your browser, and I suspect that’s what happened here.

It also looks like @MangbawiTawmbing’s issue has been resolved as well, as I see that https://mangbawitawmbing.github.io/ludo/dicee.html is correctly displaying its CSS.

For all those coming to this topic later with a similar issue, below are some common situations where we see CSS not working properly, and how to fix it.

Check for these common issues:

Incorrect URL to the stylesheet

Sometimes people accidentally use a stylesheet URL/directory path for their local computer, e.g. <link rel=“stylesheet” type=“text/css” href=“C:\Users\MyName\Project\styles.css”>

Solution:
Use a relative path to refer to your file, e.g. <link rel=“stylesheet” type=“text/css” href=“styles.css”>.

You can learn more about relative paths and how to create them here.

Incorrect path to the stylesheet

Sometimes people reference the stylesheet at the wrong place, e.g.

<link rel=“stylesheet” type=“text/css” href=”css/styles.css”> but the stylesheet is actually at <link rel=“stylesheet” type=“text/css” href=“styles.css”>.

Solution:
Double check the path to the stylesheet.

Incorrect capitalization

People can also accidentally have capitalization that doesn’t match the filename. For example, the stylesheet is referenced like this:
<link rel=“stylesheet” type=“text/css” href=“styles.css”>.

However, the file is named styles.CSS. As a result, the stylesheet won’t be loaded since since GitHub Pages is case-sensitive.

Solution:
Double check to ensure all capitalization matches.

Better Solution:
Use all lowercase letters for all filenames and URLs.

Missing file or directory

Sometimes we find that the stylesheet or even entire css directory was never uploaded or pushed to the repository. This often happens when using the web interface to upload files.

Solution:
Ensure all files and directories have been pushed to the repository, so that the contents of the GitHub repository matches the contents of your local repository.

CSS stops working after adding custom domain

We often have people write in to tell us that their CSS was working fine until they added a custom domain to their repository. One way to prevent many of these types of issues is to use relative paths, but some site builders do use the full URL as a base path, so you may need to change a setting or two.

Solution:
Change React or Jekyll settings:

For Jekyll sites, edit _config.yml. If values are set for baseurl or url variables, we recommend deleting these lines entirely. This will allow GitHub Pages to detect and configure the ideal baseurl and url values in the background, automatically adjusting for changes to your site’s custom domain.

For React sites, edit package.json. Change the “homepage” setting to your custom domain. Ensure that this setting matches the exact domain specified in your repository’s CNAME file.

For example, if your CNAME file contains mydomain.com, your package.json file should contain:

“homepage”: “https://domain.com”

If your CNAME file contains www.mydomain.com, your package.json file should contain:

“homepage”: “https://www.domain.com”

Additional Resources

If you are here looking for a solution to your CSS issue, I hope we’ve been able to help with the information above! Here are some additional resources that may be helpful:

Explanation of absolute vs. relative paths:

MDN Web Docs

What is a URL?

With Hypertext and HTTP, URL is one of the key concepts of the Web. It is the mechanism used by browsers to retrieve any published resource on the web.

Introduction to using cascading style sheets:

MDN Web Docs

CSS: Cascading Style Sheets

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML

Instructions on deploying a React app to GitHub Pages:

create-react-app.dev

Create React App · Set up a modern web app by running one command.

`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the...

[HeySkidee]

Hello :slight_smile: ,

i also encountered same problem . i tried diff ways and methods but still the css was not working in Github Pages

[SOLUTION] : first make your complete project locally on your PC and after finishing it. create a repository and click on the option uploading an existing file :

---

and then just drag and drop your whole project. if u want to edit something, then directly edit the code on github website. don’t use command line for github pages.

my repo : https://github.com/HarshitKumarOjha/HarshitKumarOjha.github.io
Result : https://harshitkumarojha.github.io/

[ruestitch]

Thanks for the suggestion, @HeySkidee. I'm having the same issue with site rendering after checking the advice provided.

When I tried the solution you've suggested, I got the "too many files" error for a simple site. Does uploading the files in batches have any impact?

[amanjotsahni]

your solution actually worked. thank you so much

[gradientus]

This did work and it is such a strange workaround.
In addition, other strange behavior I noticed:
css/style.css didn’t work. ./css/style.css didn’t work.
I had to put style.css in the root directory. I don’t have a problem with it being there but it seem GitHub needs to do some bug triage.

Adding image path in the css with ./img/1.jpg didn’t work., neither did img/1.jpg.
I ended up adding the image to the root as well as another workaround.

Not the greatest behavior. There definitely is a bug here.

You can see the oddities in https://gradientus.github.io/tea/

[Muskan-Malhotra]

Thank you it really helped a lot

[Rohit-1604]

Screenshot (52)1913×890 65.8 KB

my bootstrap code is not working when i uploaded my file on github

GitHub

Rohit-1604/fitness

Contribute to Rohit-1604/fitness development by creating an account on GitHub.

[tmetz]

Hi @Rohit-1604! Jekyll is ignoring the node_modules directory, which is why anything in it (like Bootstrap’s CSS and JS) is not being found.

Since it doesn’t look like you’re using Jekyll, one way to solve this would be to create an empty file named .nojekyll in the root of your publishing source. This will bypass the Jekyll portion of the Pages build process, and you should be able to successfully call files that are within node_modules.

[ikukona]

holy f you made my day thank you so so so much

[huppsy-dev]

dayum bro i'm late but thank you dude! your aproach was the only one that worked for me :P

[tojumikie]

Wow this worked for me, after fighting this thing for a whole month!
I was just about to give up and host my website on AWS or something else.
you made my day

[roberiof]

love u

[Firgrep]

my god, this fixed it for me as well. I had the issue that my astro build wasn't working in that the css and js files weren't being loaded despite path being correct. Once I moved these files manually out of /_astro and into root, edited the path in the index.html, everything worked, so something was messing up the access to that folder. Thanks supermuch!

[Rohit-1604]

Now I have created the empty file named .nojekyll in the repository root. but even after that bootstrap is not applied on the page. root repository - https://github.com/Rohit-1604/fitness.git
website repository - https://rohit-1604.github.io/fitness/

[ghost]

Copy follwing code to your site _config.yml

theme: null

Or create a new file .nojekyll

[joaomarcosribeiroc]

I had this problem and I couldn’t find solution anywhere. All the folders where I placed css at were named with names starting with underscore( _ ), so I take off all underscores then it works. For example, the “_css” folder was renamed to “css”. I don’t know why it happens. Does GitHub Pages pages treat folders whose name starts with underscore as they are hidden, the same way linux hide folders whose name starts with a period( . )? Maybe

[EkaterinaOssetchkina]

This fixed it for me! Thank you :)

[VaishnaviPandey]

I am facing the same problem. HTML is working, but CSS is not being applied.I can’t figure it out kindly help. link to website is: https://vaishnavipandey.github.io/Personal-CV/

[huppsy-dev]

Hi! You could edit the _config.yml file content to theme: null
or
add a .nojekyll file, without any content in it in your /root folder

[xinwei-zhuang]

My css file doesn't work properly and the above debugging doesnt help...
https://xinwei-zhuang.github.io/
Attached image from my local folder which doesn't appear the same in the github webpage..

[shaikaleem254]

I am facing the same problem. HTML is working, but CSS is not being applied.I can’t figure it out kindly help. link to website is: https://shaikaleem254.github.io/portfolio/

[NazmusSayad]

Update your css path

Your current code;

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

Make this:

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

[Lanarish]

Hi! I have the same problem, some bg-images don't show on the page after deployment. I tried all advice from this thread, removed all slashes from paths, add type="text/css" and even moved index.css to root, but it doesn't work for me. Maybe I'm blind :(
class = "container__banner" dosen't show bg-image: home_first-block_bg.png on main page and class="header__content" dosen't show bg-image: template_header.jpgon other pages. I've tried to change paths in URL for bg-image, but it doesn't work too. Although locally it's works!
main page locally

main page deployed

My repo - https://github.com/Lanarish/frontend66_group1
Pages - https://lanarish.github.io/frontend66_group1/

[divyasree-a]

Hi! I had the same problem. I'm coding using the Angular framework and had to build and deploy the website, so making changes in CSS messed with the build causing the website to remain the same no matter what I attempted to do.

So, anyone else having the same issue and using Angular, please rebuild and redeploy your website.

[leventkeles]

I just had a similar problem, the names of my CSS and JS files started with _. Normally it works without any problems, but such a problem occurred on Github.io. As a solution, I fixed it by deleting the _ character at the beginning of the file names. Also, do not forget to change the href link after changing the file name.

[pabloamayab]

You can solve this problem by simply adding the .nojekyll file to the root of your repository.
For more information: https://github.com/orgs/community/discussions/23166

[Shivshankar-kumar]

You Can check your file name. And put all file in same folder whether image, css or any, but not should be sub- folder.

It is working https://shivshankar-kumar.github.io/port/

[SUSHREE-0312]

Hi .. @SethClydesdale could you please help me I deployed my portfolio and the CSS is not applied. this is my link. https://sushree-0312.github.io/Personal-Portfolio/

[rilwanhaq]

https://rilwanhaq.github.io/

why my css is not applied.