Connecting CSS to my HTML on github

[klaudiablo]

Select Topic Area

Question

Body

hello!
I have an issue with connecting css to html that I added to repository.
Last time I did it exactly same way and it worked, I don't know if it's because previous was in Master and current one I struggle with is in main branch, but sth doesn't work.
My style CSS is in this link https://github.com/klaudiablo/ClubResponsiveWebsite/blob/main/style.css
and I'm trying to add it to my HTML and for now it looks like this:

I changed it back and forth in last 24h and tbh I ran out of ideas and probably I'm just not seeing sth that's super obvious.
Anyone could help?

[mattbuttondev]

Hi Klaudiablo,

Using a raw.githubusercontent.com file as a link to your CSS is not recommended, as the raw mode serves files with the Content-Type: text/plain header, which means that neither HTML, CSS, nor JS can be used directly in web pages.

To link a CSS file hosted on GitHub to an HTML file, you can use a relative or absolute path. If the CSS file is in the same repository as the HTML file, you can use a relative path, as demonstrated by the code snippet below:

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

[mattbuttondev]

Everything looks fine on my end.

If you're downloading the repository as a ZIP file, make sure you extract the folder first before opening index.html.

If you're not seeing any changes on your GitHub Pages site, it could be due to caching - this issue should resolve itself within an hour or so. You can also try opening the site in incognito mode to bypass the cache.

[klaudiablo]

yes, I just tried again and waited a bit and yes indeed it worked, sorry I got worried and thank you a lot!! :D

[bullishguate]

thanks! worked on my side

[rachelferguson204-oss]

How do you create an external CSS file with a 45 degree angle linear gradient background?

[rachelferguson204-oss]

I'm a student in the Medpl 150 class, is this the correct path for a linear-gradient at a 45degree angle.

html {
margin: 0;
padding: 0;
}
/* styles.css /
body {
/ Set a height to ensure the background covers the screen /
min-height: 100vh;
margin: 0;
/ 45deg angle followed by your chosen colors */
background: #3c5e97;
background-image: url('styletype.jpg')
background: linear-gradient(45deg, to upper right, #3c5e97, #65a0ff, #3c5e97);
font-family:'Germania One', sertif;
line-height: 1.88889;
color: #000000;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-attachment: fixed;

[AlphaStormX]

The issue is likely due to using a "raw" GitHub URL or an incorrect path. Use a relative path in your HTML section:
If style.css is in the same folder as your HTML:
html

[rachelferguson204-oss]

I'm a student in the Medpl 150 class, is this the correct path for a linear-gradient at a 45degree angle

html {
margin: 0;
padding: 0;
}
/* styles.css /
body {
/ Set a height to ensure the background covers the screen /
min-height: 100vh;
margin: 0;
/ 45deg angle followed by your chosen colors */
background: #3c5e97;
background-image: url('styletype.jpg')
background: linear-gradient(45deg, to upper right, #3c5e97, #65a0ff, #3c5e97);
font-family:'Germania One', sertif;
line-height: 1.88889;
color: #000000;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-attachment: fixed;