Codepen to Github CSS not applying

I’m having trouble getting my CSS from Codepen to apply to my Github Pages. I’m fairly new, but have looked at a TON of google searches and nothing seems to be helping.

This is what I have in my style.css

html, 
body {
  font-family: system-ui;
  font-size: 20px;
  background: #000000;
  color: red;
  text-align: center;
}
h1 {
  color: blue;
}

This is what is returned. https://nac0512.github.io/test2/
This is what it is supposed to look like on Codepen. https://codepen.io/nac0512/pen/MWKpJvb

I’ve tried it both with and without the html tag.
I have the < !DOCTYPE html > at the beginning of my index.html file.
Is there something I’m missing? Any help is appreciated. I know it works because when I right click on the link from my exported zip file from Codepen, the site has all the formatting it’s supposed to. I’m literally dragging and dropping the files directly from desktop to my repo.

1 Like

Hey, welcome to the GitHub Support Community! The reason your CSS is not displaying properly is because your CSS stylesheet is not specified in the head element of your HTML file. This works on CodePen because CodePen automatically links your CSS and JavaScript to the HTML code on their site.

To fix this issue and make your CSS stylesheet work on your GitHub Pages site, place the following block of code after the <!DOCTYPE html> line in your HTML file:

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

Hope this fixes your issue! If it doesn’t work please let me know, if it does then mark this reply as a solution!

2 Likes

It worked, perfect! Thank you. For future reference, do I just have to put that at the beginning of every project I import?

1 Like

For every project you import from CodePen, you’ll need to add that entire head element block into your HTML file (just make sure to change the name of the CSS file in that block if it is different). Glad it worked out!

Got it. Thanks so much.

1 Like