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?

AndrewL64 · Accepted Answer · 2019-01-09 19:07:01Z

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 9, 2019 at 19:07

answered Jan 9, 2019 at 17:56

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AndrewL64 Over a year ago

@WyattNulton So I think this issue is not code related or GitHub related anymore but browser related as can be seen here: stackoverflow.com/questions/39228657/…

Wyatt Nulton Over a year ago

Darn that's unfortunate. would inline/internal CSS be the way to go?

AndrewL64 Over a year ago

Wait. I figured it out. Just replace the above link with this: <link rel="stylesheet" type="text/css" href="https://legoman8304.github.io/style.css"> and it should work.

hong4rc · Accepted Answer · 2019-01-09 19:01:34Z

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 9, 2019 at 19:01

hong4rc

4,0994 gold badges24 silver badges42 bronze badges

1 Comment

sam Over a year ago

GitHub doesn't allow you to do that. The best way to do is to create a Github page on repo and then use assets uploaded on repo like CSS files. for example myrepo.github.io/style.css

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related