I am having trouble getting my custom CSS file to be applied to my website on Github pages

I attempted to upload a custom CSS file to apply on

The raw CSS file is located at:

https://raw.githubusercontent.com/themomoravi/SoundOff-Website/master/styles.css

I used the following as my href since it directly links to the raw CSS file:

href="https://raw.githubusercontent.com/themomoravi/SoundOff-Website/master/styles.css">

Unfortunately, this approach did not work. I also tried different variations such as styles.css, SoundOff-Website/styles.css, etc. (as my href). I am curious about other reasons why GitHub pages may not be displaying my custom CSS.

Please provide guidance. Thank you in advance!

htmlcssgithub

Answer №1

If you're hosting your website from a GitHub repository using GitHub pages (based on the link you shared), it's best to reference your assets in a relative way like this:

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

Add this line in the <head> section of your index.html.

Directly linking to GitHub raw storage can cause issues as it doesn't function like a CDN and returns everything with a plain/text header. While there used to be a handy service that acted as a bridge between clients and raw GH storage, it has since been shut down, leaving GitHub pages as a reliable alternative.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display a chosen item in a text input field?

https://i.stack.imgur.com/Qe5Ds.png Looking to create a similar design, but lacking the necessary expertise. What steps should I take or what is the specific term for this style? Seeking assistance in implementing this using jQuery, PHP, or JavaScript. A ...

javascriptphpjqueryhtml

Scrollbar generation causing spacing issues in Internet Explorer

So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...

htmlcssinternet-explorerscrolloverflow

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

jqueryhtmlajaxbootstrap-modal

Tips for resizing the width automatically within a container?

I am facing an issue with a container that contains 3 DIVS: left sidebar, main content, and a right sidebar. I have made the main content responsive by setting the width to width:calc(100% - 400px); (where 400px is the combined width of the sidebars). Howe ...

htmlcss

Creating multiple nested ng-repeats in an AngularJS table

Managing a large amount of data on users' availability by hour for multiple days can be challenging. The data is structured as follows: availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... } arrayOfUsers= [ userArray, userArray, ... ] user ...

javascripthtmlangularjs

htmlEnhance your webpage with a native-like combobox

<!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser" placeholder="choose browser"> <datalist id="browsers"> <option value="Internet Explorer"> ...

htmlcss

Issue with setting HTML content using jQuery's .html() method

I have a simple functionality. When a user clicks on the edit link, it transforms the previous element into an input element for editing, and changes the edit link into a cancel link. If the user decides not to edit, they can click on cancel and everything ...

javascriptjqueryhtml

Div element obstructing the ability to view markers

Issue with a positioned DIV over Google Maps: The DIV is causing accessibility problems for the map, taking up the entire width when it should stop at the green square borders. Interaction with the map is limited to the very bottom after the green square. ...

htmlcssgoogle-maps

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

I have been working on a code that involves multiple scrollbars that are all linked together. When you move one scrollbar, the other two will move proportionally. However, due to differences in width, the scroller doesn't always reach the end of the s ...

javascripthtmlcss

Reset the queue for the slideDown animation using jQuery

I am experiencing an issue with my code where multiple animation effects are running simultaneously. Specifically, when I hover over navbarli1 and then move to another li element with the same navbarli1 class, the slide-down effect is not working as expect ...

jqueryhtmlcssanimation

Tips for inserting a php variable into an html document

I am trying to figure out how to export a variable from a php file into an html file. The php file I'm working with is example.php and it contains the following code: <?php $array= ['one','two']; ?> The html file is named ...

javascriptphphtml

Tips for presenting random images from an assortment of pictures on a webpage

I'm looking to enhance my website by adding a unique feature - a dynamic banner that showcases various images from a specific picture pool. However, I'm unsure of how to find the right resources or documentation for this. Can you provide any guid ...

javascripthtmlcssangular

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

javascriptjqueryhtmlcssangularjs

Extract content within Python pre tags

A Python code snippet is being used to extract content between PRE tags: s = br.open(base_url+str(string)) u = br.geturl() seq = br.open(u) blat = BeautifulSoup(seq) for res in blat.find('pre').findChildren(): seq = res.string ...

pythonhtmlparsingbeautifulsouppre

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

javascripthtmlcsscss-selectors

Echo a JS variable into PHP and then insert a PHP file into an HTML element - a step-by-step guide!

Greetings to the wonderful community at stackoverflow, I am currently working on a variable code that allows for easy insertion of code from another file, such as a div. I am curious if it is possible to include a PHP file using JavaScript and JS variable ...

javascriptphphtmlvariables

Every time Tailwind compiles, it seems to generate a glitchy class

There was a time when I accidentally wrote 2 classes without a space max-w-[412px]mb-[36px]. This caused an error, so I added a space between the classes. However, the error persisted even after making this correction. In a last attempt to resolve the issu ...

cssreactjsnext.jstailwind-css

Can you explain the meaning of 1__qem?

While looking at the default styles applied to HTML elements for Google Chrome, I came across this information on this page: p { display: block; -webkit-margin-before: 1__qem; -webkit-margin-after: 1__qem; -webkit-margin-start: 0; -web ...

cssgoogle-chromewebkit

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

Introducing a new feature that allows automatic line breaks when using the detail

Looking to achieve centered text for a summary where the arrow, when clicked, reveals additional details. However, currently, the text and arrow are on separate lines. The goal is to have the arrow on the same line as the summary text and perfectly center ...

htmlcss