MrEikono
MrEikono

Reputation: 25

Why won't my CSS work on GitHub Pages?

I'm making a web game called Sweet Shoppe, and I'm using GitHub Pages with it. The only problem is, the CSS won't work on GitHub Pages.

I've tried putting the CSS file in the main repo (and in a folder) and importing it through the HTML, but when I go to my page URL (which is set to mreikono.github.io/Sweet-Shoppe) the CSS that I have in the file (which adds a background of gray stripes to the body) fails to show up.

Mainly I want to know the following: What is the correct way to import some CSS into GitHub Pages?

Upvotes: 1

Views: 1987

Answers (1)

Subtlebot
Subtlebot

Reputation: 322

Looks like bootstrap is overriding your background color on line 896.

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #ffffff;
}

Try loading your stylesheet after bootstrap so that your styles are prioritized.

<head>
    <!-- Extra code files -->

    <!-- External files -->
    <link rel="stylesheet" href="http://bootswatch.com/lumen/bootstrap.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-git2.js"></script>

    <!-- CSS -->
    <link href="styles/style.css" rel="stylesheet" type="text/css">

    <!-- Misc attributes -->
    <meta charset="utf-8">
    <title>Sweet Shoppe</title>
</head>

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

Upvotes: 2

Related Questions