Skip to content

CSS not being applied in pages :/ #22495

Answered by tmetz
noethix asked this question in New to GitHub
CSS not being applied in pages :/ #22495
Sep 30, 2018 · 19 answers · 3 replies

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

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 proper…

Replies

19 suggested answers
·
3 replies

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.

0 replies

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

0 replies

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?

0 replies

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.

0 replies

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…

0 replies

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. 

0 replies

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. 

0 replies

Can you help me with mine? 

https://github.com/MangbawiTawmbing/ludo

0 replies

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...

0 replies
Answer selected

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 :

1


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/

0 replies

your solution actually worked. thank you so much

0 replies

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/

0 replies

Thank you it really helped a lot

0 replies

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.

0 replies

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.

2 replies
@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

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/

0 replies

Copy follwing code to your site _config.yml

theme: null

Or create a new file .nojekyll

0 replies

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

0 replies

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/

1 reply
@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment