How to link my CSS to my HTML in a github hosted site

Question

My problem is that my website that I'm attempting to host with Github pages will not read the CSS that I have linked to it.

My HTML looks like this:

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
<html>
    <body>
        <h1>Hello World</h1>
        <p>I'm under construction!</p>
        <h6>Copyright MIT Licence 2018</h6>
    </body>
</html>

My CSS looks like this:

body {
  background-color: lightblue;
}

h6 {
  color: navy;
  margin-left: 20px;
}

Link repository: legoman8304.github.io

I'm guessing I linked the CSS wrong because when I using inspect element on the site itself it does show style.css but when opened it's empty. Any help?

https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css doesn't exist. It leads to a 404 error. — AndrewL64, Jan 09 '19 at 17:51
Men your html code is wrong, your link tag should be inside a tag and everything nested inside the html tag, you should start by fixing that. — vitomadio, Jan 09 '19 at 18:02

AndrewL64 · Accepted Answer · 2019-01-09T19:07:01.497

5

You need to link your HTML to the github page rendered style.css and not the file itself in the repo.

Change this:

<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">

To this:

<link rel="stylesheet" type="text/css" href="https://legoman8304.github.io/style.css">

And move that stylesheet reference inside your <head> tag.

edited Jan 09 '19 at 19:07

answered Jan 09 '19 at 17:56

AndrewL64

15,794
8
47
79

1

It almost worked, but that came up with a new error: ```Refused to apply style from 'https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.``` and style.css no longer shows up in sources – Wyatt Nulton Jan 09 '19 at 18:12
Hmm. hold on. I'll try fiddling with some file in my own GitHub. – AndrewL64 Jan 09 '19 at 18:14
@WyattNulton So I think this issue is not code related or GitHub related anymore but browser related as can be seen here: https://stackoverflow.com/questions/39228657/disable-chrome-strict-mime-type-checking – AndrewL64 Jan 09 '19 at 18:33
Darn that's unfortunate. would inline/internal CSS be the way to go? – Wyatt Nulton Jan 09 '19 at 18:35
Wait. I figured it out. Just replace the above link with this: `` and it should work. – AndrewL64 Jan 09 '19 at 18:36

score 0 · Answer 2 · answered Jan 09 '19 at 19:01

0

You can use some way:

Recommend: <link type="text/css" rel="stylesheet" href="style.css" />
Use from raw your css with href: https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css

answered Jan 09 '19 at 19:01

hong4rc

3,999
4
21
40

How to link my CSS to my HTML in a github hosted site

2 Answers2

Linked